materialize基礎---組件

輪播 carousel

結構：

.carousel.carousel-slider>
  a.btn.carousel-fixed-item+
  carousel-item*n

設置：

//初始化
$("#").carousel({
  //轉換時間
  time_constant:200,
  //縮放
  dist:-100,
  //間距
  shift:0,
  //內間距
  padding:0,
  //全屏，配合`.carousel-slider`使用
  full_width:false,
  //點標
  indicators:false,
  //不循環子項目？！
  no_wrap:false
})

百葉模式：.carousel；
全屏模式：.carousel.carousel-slider並設置full_width:true；
輪播圖或者文字配背景圖；

摺疊 collapsible

結構：

ul.collapsible.popup[data-collapsible='accordion']>
   li>(
     .collapsible-header+
     .collapsible-body.active
   )

初始化

$("#").collapsible({
  //摺疊式
  accordion:false,
  //打開式
  expandable:false,
  //回調函數
  onOpen:fn(),
  onClose:fn()
});

氣泡模式ul加.popup；
data-collapsible值：accordion和expandable；

彈出消息 toast

JS調用Materialize.toast(message, displayLength, className, completeCallback)；

• message：內容，可以是HTML
• displayLength：顯示時間
• className：自定義樣式
• completeCallback：消失後回調函數

提示 tooltipped

結構：
.tooltipped[data-position][data-delay][data-tooltip]

• [data-position：left/right/top/bottom顯示方位
• [data-delay]：延遲顯示
• [data-tooltip]：顯示的內容/HTML
  初始化：

$("#").tooltip({
  delay:350,
  tooltip:"",
  position:"bottom",
  html:false
})

去除：
$("#").tooltip('remove');

下拉列表 dropdown（留坑中）