Thanood

.md-parallax-demo .parallax {
  z-index: 0;
}

Thanood

<template>
  <div>
      <div>
        <p><a md-button href="#modal1" class="modal-trigger">show modal</a></p>
      </div>
      <div id="modal1"  md-modal="dismissible: false;" md-modal.ref="myDialog">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
          <div>

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>
  <require from="./logger"></require>
  <div class="row">
    <div class="col s12">
      <div>
        <p><button md-button click.delegate="openModal()">show modal</button></p>
      </div>
      <div id="modal1" md-modal md-modal.ref="modal" md-on-modal-complete.delegate="onComplete($event)" md-on-modal-ready.delegate="onReady($event)">
        <div class="modal-content">
          <h4>Modal Header</h4>

Thanood

<template>
  <div>
      <div>
        <p><a md-button class="modal-trigger" href="#modal1">show modal (href with ID)</a></p>
        <p style="margin-top: 15px;"><button md-button click.delegate="openModal()">show modal (button without ID)</button></p>
      </div>
      <div id="modal1" md-modal md-modal.ref="modal">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>

Thanood

<template>
  <md-carousel md-indicators="true" md-slider="true" class="center" style="height: 400px;">
    <div class="carousel-fixed-item center">
      <a md-button md-waves class="white grey-text darken-text-2">button</a>
    </div>
    <md-carousel-item class="red white-text">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </md-carousel-item>
    <md-carousel-item class="amber white-text">

Thanood

<template>
  <md-carousel md-slider="true" style="height: 400px;">
    <md-carousel-item md-href="#one!" md-image="http://lorempixel.com/250/250/nature/1"></md-carousel-item>
    <md-carousel-item md-href="#two!" md-image="http://lorempixel.com/250/250/nature/2"></md-carousel-item>
    <md-carousel-item md-href="#three!" md-image="http://lorempixel.com/250/250/nature/3"></md-carousel-item>
    <md-carousel-item md-href="#four!" md-image="http://lorempixel.com/250/250/nature/4"></md-carousel-item>
  </md-carousel>
</template>

Thanood

<template>
  <md-carousel>
    <md-carousel-item md-href="#one!" md-image="http://lorempixel.com/250/250/nature/1"></md-carousel-item>
    <md-carousel-item md-href="#two!" md-image="http://lorempixel.com/250/250/nature/2"></md-carousel-item>
    <md-carousel-item md-href="#three!" md-image="http://lorempixel.com/250/250/nature/3"></md-carousel-item>
    <md-carousel-item md-href="#four!" md-image="http://lorempixel.com/250/250/nature/4"></md-carousel-item>
  </md-carousel>
</template>

Thanood

<template>
  <md-slider view-model.ref="slider" md-indicators.bind="indicatorsVisible" md-interval="6000" md-transition="600">
    <li>
      <img src="http://lorempixel.com/580/250/nature/1" />
      <div class="caption center-align">
        <h3>This is our big Tagline!</h3>
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
      </div>
    </li>
    <li>

Thanood

<template>
  <div style="margin-bottom: 10px;">
    <a md-button click.delegate="slider.pause()">pause</a>
    <a md-button click.delegate="slider.start()">start</a>
    <a md-button click.delegate="slider.prev()">prev</a>
    <a md-button click.delegate="slider.next()">next</a>
  </div>
  <md-slider view-model.ref="slider">
    <li>
      <img src="http://lorempixel.com/580/250/nature/1" />