Thanood

<template>
  <div>
    <md-card md-title="Password input">
      <div>
        <md-input md-type="password" md-label="password text field" md-value.bind="password"></md-input><br />
      </div>
    </md-card>
    <md-card md-title="Email input">
      <div>
        <md-input md-type="email" md-label="email text field" md-validate="true" md-validate-error="invalid email" md-value.bind="email"></md-input><br />

Thanood

Textareas don't autoresize

The reason for that is there's a "hiddendiv" created on document.ready() to determine the height of the resized textarea. That hidden div doesn't exist anymore when the sample app creates real textareas (see here). After Aurelia takes control, it replaces the content of its container (meaning aurelia-app="main").

The reference to hiddenDiv (a variable) is essentially broken once Aurelia kicks in. I'm not sure if there is any good workaround apart from creating such a div manually and outside of Aurelia scope.

Thanood

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-disabled.bind="disabledValue"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
	  <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setDisabled()">Toggle Input Disabling</button>
	  
	  <md-input md-label="readonly - bound to the field above" md-value.bind="textValue" md-readonly.bind="true"></md-input><br />
  </div>
</template>

Thanood

<template>
  <style>
    .waves-effect {
      position: static;
    }
  </style>
  <div class="row">
    <ul md-tabs class="z-depth-1">
      <li md-waves="color: primary; block:"><a class="active" href="#tab1">Tab 1</a></li>
      <li md-waves="color: primary;"><a href="#tab2">Tab 2</a></li>

Thanood

<template>
   <require from="./md-auto-focus"></require>
   <div>
     Thanks to @swalters!
   </div>
   <p>
     <md-input md-auto-focus md-wait-cursor.bind="loading" md-label="text field"></md-input>
   </p>
</template>

Thanood

<template>
   <require from="./md-wait-cursor"></require>
   <div>
     Thanks to @MaximBalaganskiy!
   </div>
   <p>
     <button md-button md-waves="color: light;" md-wait-cursor.bind="loading">wait</button>
     <md-input md-wait-cursor.bind="loading" md-label="text field"></md-input>
   </p>
   <table>

Thanood

.collection.waves-color-sample .collection-item {
  height: 57px;
  line-height: 37px;
}

.collection.waves-color-sample .collection-item a[md-waves] {
  background-color: white;
  color: #212121;
}
.collection.waves-color-sample .collection-item a[md-waves="color: light;"] {

Thanood

<template>
  <a md-button md-waves>Waves on a button</a>
  <a md-button="floating: true; large: true;" md-waves="color: light; circle: true;" style="line-height: 55px;">circle</a>
  <div md-waves="block: true;" style="border: 1px dotted grey; margin: 10px 0; height: 80px; width: 120px;">
    Waves on a div.
  </div>
</template>

Thanood

<template>
  <div>
    <a md-button md-fadein-image="ref.bind: image">fade in image</a>
  </div>
  <div>
    <!--
      when attached, the referenced element will have its opacity set to 0
    -->
    <img ref="image" src="http://aurelia-ui-toolkits.github.io/demo-materialize/images/transition-sample-1.jpg" style="width: 500px;" />
  </div>

Thanood

<template>
  <a md-button md-staggered-list="ref.bind: list">stagger list</a>
  <!--
    when attached, all li children of the referenced element will have
    their opacity set to 0
  -->
  <ul ref="list">
    <li>
      <h4><a>List Item</a></h4>
      <p>This is a description</p>