MUI组件(1)

accordion(折叠面板)



MUI组件(1)_第1张图片
Accordion(折叠面板)

注:折叠面板默认是收缩的,若需要将某个面板默认展开,则需要在 li 标签上增加属性 .mui-active 即可。

actionsheet(操作表)



选择城市

MUI组件(1)_第2张图片
Actionsheet(操作表)

注:actionsheet 一般从底部弹出,显示一系列可供用户选择的操作列表;actionsheet 是从 popover 控件基础上演变的,实际上是一个固定从底部弹出的 popover 。

badge(数字角标)


125
564
MUI组件(1)_第3张图片
Badges(数字角标)

注:数字角标一般和其他控件配合使用,用于进行数量提示。比如邮件未读数量、通知公告未读数量、文件未查看数量都可以用数字角标来突出显示。数字角标提供两套显示方案:一种是有底色的,直接使用 mui-badge 样式即可;另一种是无底色的,需要在 mui-badge 样式后面增加 mui-badge-inverted 样式。

button (按钮)


MUI组件(1)_第4张图片
Button(按钮)

注:MUI默认按钮为灰色,其另外提供了五种色系(blue、green、yellow、red、purple)和五种场景(primary、success、warning、danger、royal)的按钮。

MUI新增加载中按钮样式,可通过JS API切换 loading 和 reset 状态。

属性名 作用
data-loading-text loading状态显示的文字。默认为loading
data-loading-icon loading状态显示的icon,默认为mui-spinnermui-spinner mui-spinner-white(根据按钮样式自动识别),为空表示不使用icon
data-loading-icon-position loading状态显示的icon的位置,支持left/right,默认left。

参考文档

  • MUI官方文档
上一章 下一章

你可能感兴趣的:(MUI组件(1))