1.accrodion(折叠面板);
折叠面板用ul包裹li标签,ul的类名为mui-table-view,li节点类名为.mui-collapse,默认不展开,加.mui-active类即可默认展开。
2.actionsheet(操作表);
actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮。从popover控件演变而来,所以只需要在含有.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类。操作表推荐使用锚点方法显示/隐藏,使用js控制显示隐藏,需要在popover插件的构造方法中传入“toggle”参数,例如:mui('#sheet1').popover('toggle')。
3.badge(数字角标);
核心类:.mui-badge,默认为实心灰背景,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标。.mui-badge-inverted为无底色的角标。
4.button(按钮);
mui默认按钮为灰色,还提供了蓝色(blue --> primary)、绿色(green --> success)、黄色(yellow --> warning)、红色(red --> danger)、紫色(purple -->royal)五种色系的按钮,五种色系对应五种场景..mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。
(1)普通按钮
.mui-btn类即可生成默认按钮,若要改变颜色只需增加对应的类名就可以了。.mui-btn-outlined可得到无底色有边框的按钮。
(2)加载中按钮
通过JS API切换 loading和reset状态,加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置。
data-loading-text;loading 状态显示的文案,默认为:loading;
data-loading-icon;loading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white(根据按钮样式自动识别),为空表示不使用icon;
data-loading-icon-position;loading 状态显示的icon的位置,支持left/right默认left。
5、cardview(卡片视图)
用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等。mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成。
6、checkbox(复选框)
mui-checkbox类显示checkbox,默认右侧显示,若需要显示在左侧,只需增加.mui-left类即可。
7、dialog(对话框)
弹出的对话框,包括:alert(警告)、confirm(确认)、prompt(输入对话框)、toast(自动消失提示框);
8、gallery(图片轮播)
图片轮播继承自slide插件,所以dom、事件均和slide插件相同。
9、grid(栅格)
类似于bootstrap的栅格,通过类名控制,在类名前加上mui即可。mui-content等同于container,mui-row等同于row。
10、icon(图标)
只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可(name为图标名称,例如:weixin、weibo等),具体有哪些图标请查官方文档点击进入
11、input(表单)
所有包裹在.mui-input-row类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%;。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列。
增强输入:快速删除(.mui-input-clear类)、搜索框(.mui-input-search)类,就可以使用search控件、语音输入*5+ only:为了方便快速输入(.mui-input-speech类)、密码框(.mui-input-password)
12、list(表单)
13、mask(遮罩蒙版)
14、number box(数字输入框)
15、offcanvas(侧滑菜单)
16、popover(弹出菜单)
17、piker(选择器)
18、progressbar(进度条)
19、transparentBar(透明状态栏)
20、radio(单选框)
21、range(划块)
22、scroll(区域滚动)
23、slide(轮播组件)
24、switch(开关)