Thanood

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./open-api-info"></require>
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>
          Open API Designer
        </span>

Thanood

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <label>chips</label>
  <div md-chips="data.two-way: chips"></div>
  <div repeat.for="chip of chips">
    <p>${chip.tag}</p>
  </div>
  <button md-button md-waves="color: light;" click.delegate="addChip()">Add a chip</button>
  <button md-button md-waves="color: light;" click.delegate="removeChip()">Remove last chip</button>
</template>

Thanood

<template>
  <au-md-tabs md-stretch.bind="stretched" view-model.ref="demotabs">
    <au-md-tab md-label="tab 1" class="z-depth-1" style="padding: 25px;">
      This is tab 1
    </au-md-tab>
    <au-md-tab md-label="tab 2" class="z-depth-1" style="padding: 25px;">
      This is tab 2
    </au-md-tab>
    <au-md-tab md-label="tab 3" class="z-depth-1" style="padding: 25px;">
      This is tab 3

Thanood

<template>
  <div>
    <select md-select value.two-way="selectedMeal">
      <option model.bind="null">Select your meal</option>
      <option repeat.for="meal of food" model.bind="meal">${meal.name} - ${meal.count}</option>
    </select>

    <a md-button="flat: true;" md-waves click.trigger="setSelectedMeal()" class="accent-text">select steak</a>
    <a md-button="flat: true;" md-waves click.trigger="increasePizzaCount()" class="accent-text">increase pizza count</a>
    You selected: ${selectedMeal | stringify}

Thanood

Indicator issue when using tabs with waves

Waves make the container position: relative; and because of that the position of the child (a in the tab li) cannot be calculated correctly, it's always at left: 0.

To work around this, set this in a css file (like in app.css here):

[md-tabs] .waves-effect {
  position: static;
}

Thanood

<template>
  <require from="./mdx-no-collapse"></require>
  <div>
    Thanks to @djensen47!
  </div>
  <div class="collapsible-basic-use">
    <ul md-collapsible>
      <li>
        <div class="collapsible-header">
          First

Thanood

<template>
  <div md-chips="data.bind: chips; autocomplete-data.bind: autocompleteData;"></div>
  <div>
    <!-- chip data: ${chips|stringify} -->
    chip data:
    <ul>
      <li repeat.for="chip of chips">
        ${chip.tag}
      </li>
    </ul>

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>
  <require from="./filterPizzaValueConverter"></require>
  <div style="margin-bottom: 15px;">
    Thanks to @eikaramba
  </div>
  <div>
    <md-checkbox md-checked.bind="shouldFilter">filter pizza (changes the array for select)</md-checkbox>
    <select md-select multiple md-select.ref="select" value.two-way="selectedMeal">
      <option value="" disabled>Select your meal</option>
      <option repeat.for="meal of food | filterPizza:shouldFilter" model.bind="meal" value.bind="meal.id">${meal.name}</option>

Thanood

<template>
  <require from="./md-datepicker-label"></require>
  <require from="./stringifyValueConverter"></require>
  <div>
    Thanks to @MaximBalaganskiy!
  </div>
  <div>
    <input md-datepicker-label="next appointment" md-datepicker="container: body; value.two-way: selectedDate;" type="date" />
  </div>
  <div>