materialize-css/jade/page-contents/waves_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

    <div id="introduction" class="section scrollspy">

      <h4>Introduction</h4>
        <p class="caption">Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design</p>
      <a class="waves-effect waves-light btn" href="#!">Wave</a>
    </div>



    <div id="applying-waves" class="section scrollspy">
      <h4>Applying Waves</h4>
      <p>To put the waves effect on buttons, you just have to put the class <code class="language-markup">waves-effect</code> on to the buttons. If you want the waves effect to be white instead, add both <code class="language-markup">waves-effect waves-light</code> as classes.</p>
      <pre><code class="language-markup">
  &lt;a class="waves-effect waves-light btn-large" href="#">Wave&lt;/a>
      </code></pre>
    </div>



    <div id="customization" class="section scrollspy">
      <!--  Customization  -->
      <h4>Customization</h4>
      <p>There are several ways to customize waves, you can either use pre-created classes, or you can define your own color by creating a new class</p>
      <div class="row">
         <div class="col s12 l6">
          <h5 class="light">Available Colors</h5>
          <p>To use these, just add the corresponding class to your button. Play around with changing the background color of butons and the waves effect to create something cool!</p>
          <pre><code class="language-markup">
    &lt;a href="#!" class="btn waves-effect waves-teal">Send&lt;/a>
          </code></pre>
          <div class="collection waves-color-demo">
            <div class="collection-item">Default<a href="#!" class="waves-effect btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-light</code><a href="#!" class="waves-effect waves-light btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-red</code><a href="#!" class="waves-effect waves-red btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-yellow</code><a href="#!" class="waves-effect waves-yellow btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-orange</code><a href="#!" class="waves-effect waves-orange btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-purple</code><a href="#!" class="waves-effect waves-purple btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-green</code><a href="#!" class="waves-effect waves-green btn secondary-content">Send</a></div>
            <div class="collection-item"><code class="language-markup">waves-teal</code><a href="#!" class="waves-effect waves-teal btn secondary-content">Send</a></div>
          </div>
        </div>

        <div class="col s12 l6">
          <h5 class="light">Custom Colors</h5>
          <p>If the color you want is not already available, you can easily make your own waves color by creating a custom CSS class. Take a look at the example below where we add a waves-brown effect</p>

          <pre><code class="language-css">
    /*
    When creating your CSS selector,
    change "brown" to something of your choosing
    */
    .waves-effect.waves-brown .waves-ripple {
     /* The alpha value allows the text and background color
     of the button to still show through. */
      background-color: rgba(121, 85, 72, 0.65);
    }
          </code></pre>
        </div>
      </div>
    </div>

    <div id="circle" class="section scrollspy">
      <!--  Circle  -->
      <h4>Circle</h4>
      <p>If you want waves to form to a non rectangular shape, there is an option for circular waves. Just add the <code class="language-markup">waves-circle</code> in addition to <code class="language-markup">waves-effect</code></p>
      <div class="row">
         <div class="col s12">
          <h5 class="light">HTML Markup</h5>
          <pre><code class="language-markup">
  &lt;a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content">
    &lt;i class="material-icons">add&lt;/i>
  &lt;/a>
          </code></pre>
          <div class="collection waves-color-demo">
            <div class="collection-item">Default<a href="#!" class="waves-effect waves-circle btn-floating secondary-content"><i class="material-icons">add</i></a></div>
            <div class="collection-item"><code class="language-markup">waves-light</code><a href="#!" class="waves-effect waves-circle waves-light btn-floating secondary-content"><i class="material-icons">add</i></a></div>
          </div>
        </div>
      </div>
    </div>

    </div>


    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#introduction">Introduction</a></li>
            <li><a href="#applying-waves">Applying Waves</a></li>
            <li><a href="#customization">Customization</a></li>
            <li><a href="#circle">Circle Waves</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>