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（留坑中）