Dialogs


Toasts

Materialize provides an easy way for you to send unobtrusive alerts to your users through toasts. These toasts are also place 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('I am a toast!', 3000) // 3000 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="button" onclick="toast('I am a toast', 2000)">Toast!</a>
              

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.

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

                <a class=" tooltipped hint--bottom" data-hint="I am a bottom positioned tooltip"> SHOW me TOOLTIP</a>
              

Then add this to your jQuery file

                $(document).ready(function(){
                  $('.tooltipped').tooltip();
                });
              

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();
            });
          

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

Button Class


  <a class="waves-effect waves-light button raised" href="#">Wave</a>
      

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 materialized 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();
  });
      

Collapsible

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

Collapsible HTML Structure


  <ul class="collapsible">
    <li>
      <div class="collapsible-header">First</div>
      <div class="collapsible-body">

Lorem ipsum dolor sit amet.

</div> </li> <li> <div class="collapsible-header">Second</div> <div class="collapsible-body">

Lorem ipsum dolor sit amet.

</div> </li> <li> <div class="collapsible-header">Third</div> <div class="collapsible-body">

Lorem ipsum dolor sit amet.

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