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!
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="btn" onclick="toast('I am a toast', 2000)">Toast!</a>
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.
toast('I am a toast!', 3000, 'rounded') // 'rounded' is the class I'm applying to the toast
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
<class="btn tooltipped" data-position="bottom" data-tooltip="I am tooltip"> SHOW me TOOLTIP</a>
$(document).ready(function(){
$('.tooltipped').tooltip({"delay": 50});
});
Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal_close
to your button.
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Agree <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<h4>Modal Header</h4>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<a href="#" class="waves-effect btn flat modal_close">Agree</a>
</div>
$(document).ready(function(){
$('.modal-trigger').leanModal();
});
$(document).ready(function(){
$('.dropdown-button').dropdown();
});
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.
<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>
$(document).ready(function(){
$('ul.tabs').tabs();
});
Waves is an external library that we've included in Materialize to allow us to create the ink effect outlined in Material Design
WaveTo 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>
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();
});
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
<div class="parallax-container">
<div class="parallax"><img src="images/parallax1.jpg"></div>
</div>
Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
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.
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.
<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>
$(document).ready(function(){
$('.collapsible').collapsible();
});
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
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.
// This behavior is the default, so nothing needs to be done
$(document).ready(function(){
$('.collapsible').collapsible();
});
$(document).ready(function(){
$('.collapsible').collapsible({ "accordion" : false });
});