Thanood

<template>
  <style>
    [md-datepicker] + i.material-icons.std-icon-fixup {
      margin-left: -24px;
      line-height: 1;
      margin-top: 12px;
      cursor: pointer;
    }
  </style>
  

Thanood

Bug with Materialize 0.97.7

Materialize 0.97.7 has an issue in Materialize which leads to the dropdown component ignoring any options.

To fix this, we have copied the fix from Materialize's Master branch and put it into a function.

To use this fix, add the following to bridge initialization in your main.js:

Thanood

<template>
  <md-colors md-primary-color="#ee6e73" md-accent-color="#2bbbad"></md-colors>
  <require from="materialize/dist/css/materialize.css"></require>
  <require from="./md-toggle-button"></require>
  <div>
    <button md-toggle-button="is-toggled.bind: isToggled;">
      <i class="material-icons">format_indent_increase</i>
    </button>
  </div>
  <div>

Thanood

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-char-counter="length: 120;"></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>
  </div>
</template>

Thanood

<template>
  <div>
    <div class="input-field col s6">
      <input md-datepicker="container: body; value.two-way: selectedDate;" type="date" />
      <label for="first_name">pick a date</label>
    </div>
    
  </div>
  <div>
    <button md-button click.delegate="setDate()">set date</button>

Thanood

<template>
  <require from="./working"></require>
  <require from="./not-working"></require>
  <p>
    <button md-button click.delegate="showNotWorking = true">Show (Not Working)</button>
    <button md-button click.delegate="showNotWorking = false">Hide</button>
  </p>
  <p>
    <button md-button click.delegate="showWorking = true">Show (Working)</button>
    <button md-button click.delegate="showWorking = false">Hide</button>

Thanood

<template>
  <require from="./working"></require>
  <require from="./not-working"></require>
  <p>
    <button md-button click.delegate="showNotWorking = true">Show (Not Working)</button>
    <button md-button click.delegate="showNotWorking = false">Hide</button>
  </p>
  <p>
    <button md-button click.delegate="showWorking = true">Show (Working)</button>
    <button md-button click.delegate="showWorking = false">Hide</button>

Thanood

Have a look at Aurelia bundler.. :point_up: 13. März 2017 14:08

Thanood

<template>
  <div>
    <p style="margin-top: 15px;"><button md-button click.delegate="openModal()">show modal</button></p>
  </div>
  <div md-modal id="mm" md-modal.ref="modal">
    <div class="modal-content">
      <h4>Datepicker modal</h4>
      <div>
        <input md-datepicker="container: body; value.two-way: selectedDate;" type="date" placeholder="pick a date" />
      </div>

Thanood

<template>
  <md-card md-image="http://aurelia-ui-toolkits.github.io/demo-materialize/images/card-sample-2.jpg" md-title="Card title" md-reveal="true">
    <div>
      I am a very simple card. I am good at containing small bits of
      information. I am convenient because I require little markup to
      use effectively.
    </div>
    <div slot="reveal-text">
      Here is some more information about this product that is only revealed once clicked on.
    </div>