Materialize基础---组件
徽章 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-*