Materialize基础---组件

湛光明

2023-12-01

徽章 badge

用于未读信息条数提示<span>包裹数字

历史条数 .badge
新消息 .new .badge

自定义标题，自定义.new的背景色

自定义标题data-badge-caption='自定义'
.颜色名改变背景色

按钮 btn

三种类型：

凸起默认 .btn深度阴影效果
hover圆形 .btn-floating，默认:hover触发
扁平化按钮，btn-flat,避免过度分层视觉疲劳

垂直绝对定位悬浮按钮组(上弹按钮组效果)：

//水平弹出，加`.horizontal`，click触发加`.click-to-toggle`，弹出为工具条，加`.toolbar`
<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="large material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating red"><i class="material-icon">publish</i></a></li>
  </ul>

//js控制打开或关闭
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();

巨大按钮.btn-large，禁用.disabled

路径导航(面包屑导航) breadcrumb

基本样式：
nav>div.nav-wrapper>div.col.s12>(a.breadcrumb{$})*3

卡片 card

分类：

文字卡片
.card >( (.card-content > (.card-title + p)) + (.card-action > a*n) )
图像卡片
.card > ((.card-image>(img + .card-title)) + .card-content + .card-action)
带按钮的图像卡片
.card > (.card-image(img + .card-title + a.btn) + .card-content + .card-action)
水平图像卡片
.card.horizontal > ((.card-image>img) + (.card-stacked > (.card-content+.card-action)))

卡片点击，文字遮盖效果
.card > ((.card-image>img.activator)+(.card-content>(.card-title+a*n))+(.card-reveal>.card-title>i.close))
添加.sticky-action到.card，使底部链接组不被遮盖

尺寸：

小型限高300px .small
中型限高400px .middle
大型限高500px .large

卡片面板：
.card-panel .teal纯文字块，带阴影效果和内补白

信息块 chip

带小圆图和删除键的信息块
.chip>(img+span+.close)

jQuery控制：
加类：.chip定义 .chips-initial初始 .chips-placeholder占位符

$(.chips).material_chip({
  data:[{
    tag:""，
    image:"",
    id:""
  }],
  placeholder:"tag",
  secondaryPlaceholder:"+Tag"
})

监听事件：chip.add、chip.delte、chip.select

集合 collection

.collection>(.collection-header+.collection-item*n)
加列表项图标：
.collection > (.collection-item.avater > (img+.title+p))*n

页脚 page-footer

.page-footer>(.container+.footer-copyright>.container)
粘性页脚：加css

body{
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
//页面分header、main、footer三部分
main{
  flex:1 0 auto;
}

表单控件和验证 input-field validate

input：
.input-field>(i.material-icons.prefix + input.validate + label[data-error][data-success])

重置所有表单控件 Materialize.updateTextFilds()

textarea：
.input-field>(textarea.materialize-textarea + label)
select：
先初始化$('select').material_select();
单选div.input-field>select>optionn;
多选div.input-field>select[multiple]>optionn;
列表项图形div.input-field>select.icons>option[data-icon=“url”.circle.right;
恢复浏览器默认select.browser-default;
更新：重新初始化；
销毁：$('select').material_select('destroy')，新创建一个下拉列表；
input[radio]：
点圈样式input.with-gap
input[checkbox]：
填充样式input.filled-in；模糊样式input.indeterminate-checkbox；(吐槽：与她的默认没啥区别)
input[checkbox]开关样式：

<div class="switch">
  <label>
  关
  <input disabled type="checkbox">
  <span class="lever"></span>
  开
  </label>
</div>

文件上传：

<form>
  <div class="file-field input-field">
    <div class="btn">
      <span>文件</span>
      //上传多个 ， multiplate
      <input type="file" multiplate>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type=text>
    </div>
</form>

HTML5滑块：

<form action="#">
  <p class="range-field">
    <input type="range" min="0" max="100" />
  </p>
</form>

日期选择器：
input.datepicker[type=date]；
先初始化

$(".datepicker").pickadate({
  selectMonths:true,
  selectYears:15
})

字符计数器:
[length="n"]
先初始化$(el).characterCounter();
自动匹配列表：
input.autocomplete
先初始化$(el).autocomplete({data:{key:val}});
禁用：
disabled

图标 material-icons

先引入<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">；
后使用el.material-icons{icon-name}；
（吐槽，图标种类有点局限性：手机端）

导航条 nav-wrapper

nav > div.nav-wrapper > (
	a.brand-logo + (ul.hide-on-med-and-down>li*n)
)

导航对齐ul.right或.logo.right + ul.left或logo居中.logo.center；
选项激活li.active

扩展导航

手机汉堡需先初始化$(".button-collapse").sideNv()

   //`.nav-extended`扩展 `.button-collapse`手机汉堡
nav.nav-extended.button-collapse>(
  .nav-wrapper>(
    a.brand-logo+
    a.button-collapse[data-activates="mobile-demo"]+
    (ul[id="nav-mobile"]>li*n)+
    (ul.side-nav[id="mobile-demo"]>li*n)
  )+.nav-content>(
    //扩展导航
    span.nav-title+
    (a.btn-floating.halfway-fab>i.material-icons)+
    .tabs.tabs-transparent>li.tab[id="#!"]*n
  )+form>(
    //搜索栏
    div.input-field>(
      input[id="search"][required][type="search"]+
      (label>i.material-icon{search})+
      i.material-icons{close}
    )
  )
)
div[id="#!"]*n

固定导航
用一个div.navbar-fixed包下nav

下拉菜单

先初始化：$(".dropdown-button").dropdown({hover:true})；
li.dropdown-button[data-activates=“dropdoownID”]；
ul.dropdown-content[id=‘dropdownID’]；

分页组件 pagination

ul.pagination>(
  (li>a>i.material-icons{left})+
  li*n+
  (li>a>i.material-icons{right})
)

预加载组件 progress

静态
.progress>.determinate[style=“width:70%”]
不确定进度(加载中动态效果)
.progress>.indeterminate
圆形进度(加载中动态效果)

.preloader-wrapper.big.active>(
  spinner-layer.spinner-blue-only>(
    (.circle-clipper.left > .circle)>
    (.grp-patch > circle)+
    (.circle-clipper.right > circle)
  )
)

– 大小.big/.small/默认
– 颜色.spinner-red-only/.spinner-blue-only/.spinner-yellow-only/.spinner-green-only/spinner-layer+spinner-*