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.
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>
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=" btn-flat yellow-text" href=" #!" >Undo<a>', 5000)">Toast!</a>
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>
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.
<!-- 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>
$(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>A bunch of text</p>
<a href="#" class="waves-effect btn-flat modal-close">Agree</a>
</div>
To open a modal using a trigger:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
You can also open modals programatically, the below code will make your modal open on document ready:
$(document).ready(function(){
$('#modal1').openModal();
});
You can also close them programatically:
$(document).ready(function(){
$('#modal1').closeModal();
});
You can customize the behavior of each modal using these options. For example, you can call a custom function to run when a modal is dismissed. To do this, just place your function in the intialization code as shown below.
$('.modal-trigger').leanModal({
dismissible: true // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration
ready: function() { alert('Ready'); }, // Callback for Modal open
complete: function() { alert('Closed'); } // Callback for Modal close
}
);
Add a dropdown list to any button. Make sure that the data-activates
attribute matches the id in the <ul>
tag.
You can add a divider with the <li class="divider"></li>
tag.
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
$(document).ready(function(){
$('.dropdown-button').dropdown();
});
The default behavior of dropdown is to activate on hover. To have it activate on a click, you can pass that as an option.
$('.dropdown-button').dropdown({
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false // Activate on click
}
);
Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.
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
<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();
});
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.
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) |
$(document).ready(function(){
$('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
});
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>
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
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>
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 components include things that have to do with large media objects like Images, Video, Audio, etc.
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();
});
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">
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.
<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 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>
$(document).ready(function(){
$('.parallax').parallax();
});
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";
}
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 });
});