Thanood

<template>
  <style>
    div.tab-content {
      padding: 10px;
    }
  </style>
  <require from="./logger"></require>
  <div class="row">

    <ul md-tabs="on-show.call: onShow(element)" md-on-selected.delegate="onTabSelected($event)" class="z-depth-1">

Thanood

<template>
  <div>
      <div>
        <p>This demonstrates a modal which is not closable by clicking the overlay, with some ridiculously long transition durations, changed opacity and positioning.</p>
        <p>The following options are used:</p>
        <code>
          <pre>
            {
              dismissible: false,
              in-duration: 1000,

Thanood

<template>
  <div class="row">
    <md-card class="col s4" md-title="Card title" md-actions="true">
      <div>
        This card has some actions.
      </div>
      <div slot="action">
        <a href="#">This is a link 1</a>
        <a href="#">This is a link 2</a>
      </div>

Thanood

// Required for Meteor package, the use of window prevents export by Meteor
(function(window){
  if(window.Package){
    Materialize = {};
  } else {
    window.Materialize = {};
  }
})(window);

Thanood

<template>
  <require from="./logger"></require>
  <a md-sidenav-collapse="ref.bind: sideNav;" md-button md-waves>Toggle SideNav</a>
  <div>
    <logger class="z-depth-1" view-model.ref="logger"></logger>
  </div>
  
  <md-sidenav
    md-on-sidenav-show.delegate="onShow($event)"
    md-on-sidenav-hide.delegate="onHide($event)"

Thanood

<template>
  <require from="./logger"></require>
  <div md-chips="data.bind: chips; placeholder:+tag;" change.delegate="logChange($event.detail)" selected.delegate="logSelect($event.detail)"></div>
  <div>
    <!-- chip data: ${chips|stringify} -->
    chip data:
    <ul>
      <li repeat.for="chip of chips">
        ${chip.tag}
      </li>

Thanood

<template>
  <div>
    <input md-timepicker="value.bind: time;" placeholder="pick a date" />
  </div>
  <div>
    <button md-button click.delegate="setTime()">set time</button>
  </div>
  <div>
    <span if.bind="time">You selected: ${time | stringify}</span>
  </div>

Thanood

<template>
  <require from="./materialize_rtl.css"></require>
  <div class="row">
    <div class="col m6">
  <p>Hello, world!</p>
  </div>
  <div class="col m6">
    <md-checkbox md-checked.bind="true">check box example</md-checkbox>
  </div>
  <button md-button click.delegate="toggleDirection()">Toggle Direction</button>

Thanood

<template>
  <div>
    <a md-button md-tooltip="position: left; text: A am a tooltip;">on the left</a>
    <a md-button md-tooltip="position: top; text: A am a tooltip;">on the top</a>
    <a md-button md-tooltip="position: bottom; text: A am a tooltip;">on the bottom</a>
    <a md-button md-tooltip="position: right; text: A am a tooltip;">on the right</a>
  </div>
</template>

Thanood

<template>
  <require from="./au-input"></require>
  <md-colors></md-colors>
   
  <au-input label="A" value.bind="foo.a" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <au-input label="B" value.bind="foo.b" percent.bind="foo.percent" salary.bind="foo.salary"></au-input> 
  
  <md-input md-label="Test" md-value.bind="foo.a & validate" md-validate="true"
      md-validate-success="good">