Carousel(旋转轮播滑块)

<div class="carousel">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
  </div>
//.js
 $(document).ready(function(){
      $('.carousel').carousel();
    });
方法：
duration    Transition duration in milliseconds. (Default: 200)
dist    Perspective zoom. If 0, all items are the same size. (Default: -100)
shift   Set the spacing of the center item. (Default: 0)
padding Set the padding between non center items. (Default: 0)
fullWidth   Make the carousel a full width slider like the second example. (Default: false)
indicators  Set to true to show indicators. (Default: false)
noWrap  Don't wrap around and cycle through items. (Default: false)
jq:
// Next slide
$('.carousel').carousel('next');
$('.carousel').carousel('next', 3); // Move next n times.

// Previous slide
$('.carousel').carousel('prev');
$('.carousel').carousel('prev', 4); // Move prev n times.

// Set to nth slide
$('.carousel').carousel('set', 4);

// Destroy carousel
$('.carousel').carousel('destroy');

 <div class="carousel carousel-slider">
    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
  </div>
//.js
$('.carousel.carousel-slider').carousel({fullWidth: true});

Carousel3.png

<div class="carousel carousel-slider center" data-indicators="true">
    <div class="carousel-fixed-item center">
      <a class="btn waves-effect white grey-text darken-text-2">button</a>
    </div>
    <div class="carousel-item red white-text" href="#one!">
      <h2>First Panel</h2>
      <p class="white-text">This is your first panel</p>
    </div>
    <div class="carousel-item amber white-text" href="#two!">
      <h2>Second Panel</h2>
      <p class="white-text">This is your second panel</p>
    </div>
    <div class="carousel-item green white-text" href="#three!">
      <h2>Third Panel</h2>
      <p class="white-text">This is your third panel</p>
    </div>
    <div class="carousel-item blue white-text" href="#four!">
      <h2>Fourth Panel</h2>
      <p class="white-text">This is your fourth panel</p>
    </div>
  </div>
  //.js
$('.carousel.carousel-slider').carousel({fullWidth: true});

Collapsible(可折叠面板)

1. Collapsible1.png
Collapsible2.png

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
//.js
$(document).ready(function(){
    $('.collapsible').collapsible();
  });
//active   选中
<div class="collapsible-header active"><i class="material-icons">place</i>Second</div>
options：
$('.collapsible').collapsible({
    accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    onOpen: function(el) { alert('Open'); }, // Callback for Collapsible open
    onClose: function(el) { alert('Closed'); } // Callback for Collapsible close
  });
Methodss:
// Open
  $('.collapsible').collapsible('open', 0);

  // Close
  $('.collapsible').collapsible('close', 0);

  // Destroy
  $('.collapsible').collapsible('destroy');

手风琴Accordion

<ul class="collapsible" data-collapsible="accordion">

Expandable(可同时展开)

<ul class="collapsible" data-collapsible="expandable">

Dialogs(弹出框)

1.

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

toast2.png

var $toastContent = $('<span>I am toast content</span>').add($('<button class="btn-flat toast-action">Undo</button>'));
  Materialize.toast($toastContent, 10000);

Callback(回调)

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

Styling Toasts(椭圆形的弹出)

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

Dismiss a Toast Programatically(移除或者是消除弹出框)

 // Get toast DOM Element, get instance, then call remove function
  var toastElement = $('.toast').first()[0];
  var toastInstance = toastElement.M_Toast;
  toastInstance.remove();
//移除全部
Materialize.Toast.removeAll();

Tooltips（相对定位弹出的小框）

<!-- data-position can be : bottom, top, left, or right -->
  <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
  <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
//.js
$(document).ready(function(){
    $('.tooltipped').tooltip({delay: 50});
  });

jQuery Plugin Options:

Option Name	Description
delay	Delay time before tooltip appears. (Default: 350)
tooltip	Tooltip text. Can use custom HTML if you set the html option.
position	Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'. (Default: 'bottom')
html	Allow custom html inside the tooltip. (Default: false)

Removal（移除相对弹出框）

// This will remove the tooltip functionality for the buttons on this page
  $('.tooltipped').tooltip('remove');

Dropdown(下拉列表)

<!-- 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>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>

Options:

Option Name	Description
inDuration	The duration of the transition enter in milliseconds. Default: 300
outDuration	The duration of the transition out in milliseconds. Default: 225
constrainWidth	If true, constrainWidth to the size of the dropdown activator. Default: true
hover	If true, the dropdown will open on hover. Default: false
gutter	This defines the spacing from the aligned edge. Default: 0
belowOrigin	If true, the dropdown will show below the activator. Default: false
alignment	Defines the edge the menu is aligned to. Default: 'left'
stopPropagation	If true, stops the event propagating from the dropdown origin click handler. Default: false

 <a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
//.js
$('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left', // Displays dropdown with edge aligned to the left of button
      stopPropagation: false // Stops event propagation
    }
  );
$('.dropdown-button').dropdown('open');
$('.dropdown-button').dropdown('close');

Media(媒体)

1.Material Box（图片可点击查看大图）

 <img class="materialboxed" width="650" src="images/sample-1.jpg">
//.js
 $(document).ready(function(){
    $('.materialboxed').materialbox();
  });
//添加标题
<img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="https://lorempixel.com/800/400/nature/4">

Slider（滑块，轮播，banner图，导航图）

<div class="slider">
    <ul class="slides">
      <li>
        <img src="https://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="https://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="https://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="https://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>
//.js
$(document).ready(function(){
      $('.slider').slider();
    });

jQuery Plugin Options:

Option Name	Description
indicators	Set to false to hide slide indicators. (Default: True)
height	Set height of slider. (Default: 400)
transition	Set the duration of the transition animation in ms. (Default: 500)
interval	Set the duration between transitions in ms. (Default: 6000)

jQuery Plugin Methods:

// Pause slider
$('.slider').slider('pause');
// Start slider
$('.slider').slider('start');
// Next slide
$('.slider').slider('next');
// Previous slide
$('.slider').slider('prev');

Modals(弹出对话框)

1.Modals HTML Structure（正常版的弹出对话框，有取消，有确定）

 <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

2.Modals with Fixed Footer(按钮固定在底部的样式)

 <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>

3.Bottom Sheet Modals(从页面底部弹出)

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>

Modals with Button trigger(加上tigger，即可弹出关闭来回切换)

 <button data-target="modal1" class="btn modal-trigger">Modal</button>

初始化

$(document).ready(function(){
    // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
  });
$('#modal1').modal('open');
$('#modal1').modal('close');

Options:

$('.modal').modal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      opacity: .5, // Opacity of modal background
      inDuration: 300, // Transition in duration
      outDuration: 200, // Transition out duration
      startingTop: '4%', // Starting top style attribute
      endingTop: '10%', // Ending top style attribute
      ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
        alert("Ready");
        console.log(modal, trigger);
      },
      complete: function() { alert('Closed'); } // Callback for Modal close
    }
  );

Parallax 滚动视差

<div class="parallax-container">
      <div class="parallax"><img src="images/parallax1.jpg"></div>
    </div>
//初始化
 $(document).ready(function(){
      $('.parallax').parallax();
    });
//.css
.parallax-container {
      height: "your height here";
    }

Tabs

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><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>
  </div>
//.js
$(document).ready(function(){
    $('ul.tabs').tabs();
  });
//methoed
 $(document).ready(function(){
    $('ul.tabs').tabs('select_tab', 'tab_id');
  });
//active 用来表示选中状态
 <li class="tab col s2"><a class="active" href="#test3">Test 3</a></li>

jQuery Plugin Options：

Option Name	Description
onShow	Execute a callback function when the tab is changed. The callback provides a parameter which refers to the current tab being shown.
swipeable	Set to true to enable swipeable tabs. This also uses the responsiveThreshold option. Default: false
responsiveThreshold	The maximum width of the screen, in pixels, where the swipeable functionality initializes. Default: Infinity

Linking to an External Page(tabs关联一个页面)

<li class="tab col s2">
    <a target="_blank" href="https://github.com/Dogfalo/materialize">External link in new window</a>
  </li>
  <li class="tab col s2">
    <a target="_self" href="https://github.com/Dogfalo/materialize">External link in same window</a>
  </li>

Swipeable Tabs(带页面联动的tabs)

 <ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
    <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
  </ul>
  <div id="test-swipe-1" class="col s12 blue">Test 1</div>
  <div id="test-swipe-2" class="col s12 red">Test 2</div>
  <div id="test-swipe-3" class="col s12 green">Test 3</div>

Transitions(动画)

showStaggeredList（列表按顺序从左边滑出）

<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>

fadeInImage(图片逐渐显示)

 <a href="#!" class="btn" onclick="Materialize.fadeInImage('#image-test')">Click Me</a>

wave 波纹效果

 <a href="#!" class="btn waves-effect waves-teal">Send</a>
Default[SEND](http://materializecss.com/waves.html#!)

`waves-light`

`waves-red` 红波纹

`waves-yellow` 黄波纹

`waves-orange` 橙波纹

`waves-purple`  紫波纹

`waves-green` 绿波纹
`waves-teal`   蓝绿色