Dialogs

Dialogs are content that are not original visible on a page but show up with extra information if needed. The transitions should make the appearance of the dialog make sense and not jarring to the user.

Toasts

Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also placed and sized responsively, try it out by clicking the button below on different device sizes.

Toast!

To do this, call the toast() function programatically in JavaScript.


  // toast(message, displayLength, className, completeCallback);
  toast('I am a toast!', 4000) // 4000 is the duration of the toast
            

One way to add this into your application is to add this as an onclick event to a button


  <a class="btn" onclick="toast('I am a toast', 4000)">Toast!</a>
            

Custom HTML

You can pass in an HTML String as the first argument as well. Take a look at the example below, where we pass in text as well as a flat button. If you call an external function instead of in-line JavaScript, you will not need to escape quotation marks.

Toast with Action

  <a class="waves-effect waves-light btn" onclick="toast('<span>Item Deleted</span><a class=&quot;btn-flat yellow-text&quot; href=&quot;#!&quot;>Undo<a>', 5000)">Toast!</a>
            

Callback

You can have the toast callback a function when it has been dismissed

Toast!

  <a class="btn" onclick="toast('I am a toast', 4000,'',function(){alert('Your toast was dismissed')})">Toast!</a>
            

Styling Toasts

We've added the ability to customize your toasts easily. You can pass in classes as an optional parameter into the toast functions like this: toast('I am a rounded toast', 2000, 'rounded'). We've added a rounded class for you, but you can create your own CSS classes and apply them to toasts. Checkout out our full example below.

Round Toast!

  toast('I am a toast!', 3000, 'rounded') // 'rounded' is the class I'm applying to the toast
            

Tooltips

Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position

  <!-- data-position can be : bottom, top, left, or right -->
  <a class="btn tooltipped" data-position="bottom" data-tooltip="I am tooltip"> SHOW me TOOLTIP</a>
            

Then add this to your jQuery file, with the hover delay you want as the option

  $(document).ready(function(){
    $('.tooltipped').tooltip({"delay": 50});
  });
            

Navigation

Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.

Tabs

The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.

Test 1

Test 2

Test 3

Test 4


Tabs HTML Structure

          <div class="col s12">
            <ul class="tabs">
              <li class="tab col s2"><a href="#test1">Test 1</a></li>
              <li class="tab col s2"><a href="#test2">Test 2</a></li>
              <li class="tab col s2"><a href="#test3">Test 3</a></li>
              <li class="tab col s2"><a href="#test4">Test 4</a></li>
            </ul>
          </div>
          <div id="test1" class="col s12">Test 1</div>
          <div id="test2" class="col s12">Test 2</div>
          <div id="test3" class="col s12">Test 3</div>
          <div id="test4" class="col s12">Test 4</div>
        
jQuery Plugin Initialization

          $(document).ready(function(){
            $('ul.tabs').tabs();
          });
        

Pushpin

Pushpin is our fixed positioning plugin. You can check out our live examples: The fixed tabs on top, and our fixed categories on the left.

jQuery Plugin Options
Option Name Description
Top The distance in pixels from the top of the page where the element becomes fixed. (Default: 0)
Bottom The distance in pixels from the top of the page where the elements stops being fixed. (Default: Infinity)
Offset The offset from the top the element will be fixed at. (Default: 0)
jQuery Plugin Initialization

  $(document).ready(function(){
    $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
  });
        

Waves

Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design

Wave

Applying Waves

To put the waves effect on buttons, you just have to put the class waves-effect on to the buttons. If you want the waves effect to be white instead, add both waves-effect waves-light as classes.


    <a class="waves-effect waves-light btn-large" href="#">Wave</a>
      

Customization

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

Available Colors

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!


    <a href="#!" class="btn waves-effect waves-teal">Send</a>
          
DefaultSend
waves-lightSend
waves-redSend
waves-yellowSend
waves-orangeSend
waves-purpleSend
waves-greenSend
waves-tealSend

Custom Colors

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


    /*
    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);
    }
          

Media

Media components include things that have to do with large media objects like Images, Video, Audio, etc.

Material Box

Material box is a material design implementation of the Lightbox plugin. When a user clicks on an image that can be enlarged. Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Creating the above image with the effect is as simple as adding a materialboxed class to the image tag.


  <img class="materialboxed" width="650" src="images/sample-1.jpg">
    

Next you simply have to add the initialization code


  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });
      

Captions

It is very easy to add a short caption to your photo. Just add the caption as a data-caption attribute.


      <img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
        

Slider

Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider.

Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.


  • This is our big Tagline!

    Here's our small slogan.
  • Left Aligned Caption

    Here's our small slogan.
  • Right Aligned Caption

    Here's our small slogan.
  • This is our big Tagline!

    Here's our small slogan.


  <div class="slider">
    <ul class="slides">
      <li>
        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
        <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>
        <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
        <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>
    </ul>
  </div>
    

Next you simply have to add the initialization code


  $(document).ready(function(){
    $('.slider').slider({full_width: true});
  });
      


Parallax

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.

Open Demo

Parallax HTML Structure


  <div class="parallax-container">
    <div class="parallax"><img src="images/parallax1.jpg"></div>
  </div>
      

Parallax Javascript Initialization


  $(document).ready(function(){
    $('.parallax').parallax();
  });
      

Parallax Container CSS

The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.


  .parallax-container {
    height: "your height here";
  }
      

Collapsible

Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

  • First

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Second

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Third

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Collapsible HTML Structure


    <ul class="collapsible">
      <li>
        <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
      </li>
    </ul>
      

jQuery Plugin Initialization


    $(document).ready(function(){
      $('.collapsible').collapsible();
    });
      

Options

There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow one section to stay open at a time, which is called an accordion. See below for a demo of each type

Accordion
  • First

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Second

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Third

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


      // This behavior is the default, so nothing needs to be done
      $(document).ready(function(){
        $('.collapsible').collapsible();
      });
          
Expandable
  • First

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Second

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Third

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


      $(document).ready(function(){
        $('.collapsible').collapsible({ "accordion" : false });
      });