MUI组件API

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(开关)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值