09.选项卡和进度条

学习要点：

1. 选项卡

2. 进度条

本节课我们来开始了解 Layui 的选项卡和进度条元素。

一．选项卡

1. 先创建一个简单的选项卡元素；

< div class ="layui-tab" >

< ul class ="layui-tab-title" >

< li class ="layui-this" > 网站设置 li >

< li > 用户管理 li >

< li > 权限分配 li >

< li > 关于系统 li >

ul >

< div class ="layui-tab-content" >

< div class ="layui-tab-item layui-show" > 内容 1 div >

< div class ="layui-tab-item" > 内容 2 div >

< div class ="layui-tab-item" > 内容 3 div >

< div class ="layui-tab-item" > 内容 4 div >

div >

div >

PS ：顶层定义： layui-tab 、导航定义： layui-tab-title 、内容定义： layui-tab-content ；

PS ：定义首选内容： layui-show ；注意： layui-show 和 layui-this 保持一致；

2. Tab 简约风格： layui-tab-brief ；

< div class ="layui-tab layui-tab-brief" >

3. Tab 卡片风格： layui-tab-card ；

< div class ="layui-tab layui-tab-card" >

PS ：所有 Tab 风格都是响应式的，当浏览器屏幕不足时会产生响应式效果；

4. 带删除的 Tab ，使用属性： lay-allowClose="true"

< div class ="layui-tab layui-tab-card" lay-allowClose ="true" >

PS ：选项卡元素依赖： element 模块； 【十天精品课堂系列】

主讲：李炎恢

二．进度条

1. 先创建一个简单的进度条元素；

< div class ="layui-progress" >

< div class ="layui-progress-bar" lay-percent ="10%" > div >

div >

PS ：进度条定义： layui-progress 、进度条进度定义： layui-progress-bar ；

PS ：百分比定义： lay-percent="10%" ；

2. lay-showPercent 可以指定是否显示比例，比如也可以用分数；

< div class ="layui-progress" lay-showPercent ="true" >

< div class ="layui-progress-bar" lay-percent ="1/3" > div >

div >

PS ：开启显示 true 或任意值，关闭就删除即可；

3. layui-progress-big 样式可以设置大号进度条；

< div class ="layui-progress layui-progress-big" lay-showPercent ="true" >

< div class ="layui-progress-bar layui-bg-blue" lay-percent ="1/3" > div >

div >

PS ：可以设置进度条进度颜色；