折叠面板:accordion
代码激活字符:maccordion
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含 .mui-collapse 类的 li 节点上
增加 .mui-active 类即可;
操作表:actionsheet
代码激活字符:mactionsheet
actionsheet 一般从底部弹出,显示一系列可供用户选择的操作按钮,actionsheet 是从 popover 控件基础上演变而来,实际
上就是一个固定从底部弹出的 popover ,故 DOM 结构和 popover 类似,只是需要在含 .mui-popover 类的节点上增加
mui-popover-bottom、.mui-popover-action 类;
数字角标:badge
代码激活字符:mbadge
数字角标一般和其他控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示、角标的核心类是 .mui-badge ,默认为实心灰
色背景,同时,mui还内置了蓝色(blue)、绿色(gree)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,
mui-badge-primary 蓝色
mui-badge-success 绿色
mui-badge-warning 黄色
mui-badge-danger 红色
mui-badge-purple 紫色
.mui-badge-inverted 加上此类可以清楚底色
按钮:button
代码激活字符:mbutton
mui 默认按钮为灰色,另外还提供了蓝色、绿色、黄色、红色、紫色五种色系的按钮,五种色系对应五种场景,分别为primary、
success、warning、danger、royal;使用 .nui-btn 类即可生成一个默认按钮,继续添加 .mui-btn 颜色值或者 .mui-btn
场景可生成对应色系的按钮。
.mui-btn-outlined 实现无底色,有边框的按钮
加载中按钮:
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
卡片视图:cardview
使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区,页脚三部分组成
mui-card-header 页眉
mui-card-content 内容区
mui-card-footer 页脚
卡片页眉及内容区,都支持放置图片,页眉放置图片 需要加 mui-card-media
在页眉中写入丰富的信息,如头像、主标题、副标题 需要加 mui-media-body
复选框:checkbox
代码激活字符:mcheckbox
用处:常用于多选的情况
mui-left 左侧显示checkbox
disabled 禁用checkbox
消息框:
警告框:mdalert
确认框:mdconfirm
输入对话框:mdprompt
消息提示框:mdtoast
图片轮播:
代码激活字符:mslider
如需要支持循环,则在 .mui-slider-group 加 .mui-slider-loop
栅格:grid
超小屏幕 < 400 mui-col-xs-[1-12] 激活代码 mcolxs
小屏幕 >= 400 mui-col-sm-[1-12] 激活代码 mcolsm
图标:icon
代码块激活字符: micon
表单:input
快速删除:只需要在input控件上添加.mui-input-clear类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;
密码框:给input元素添加.mui-input-password类
列表:list
代码块激活字符: mlist
只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可
若右侧需要增加导航箭头,变成导航链接,则只需在li节点下增加a子节点,并为该a节点增加.mui-navigate-right类即可
遮罩蒙版:mask
代码块激活字符: mmask
mui默认的蒙版遮罩使用.mui-backdrop类定义,若需自定义遮罩效果,只需覆盖定义.mui-backdrop
数字输入框:number box
代码块激活字符: mnumbox
初始化:mui在mui.init()中会自动初始化基本控件,但是 动态添加的Numbox组件需要手动初始化
属性:
data-numbox-min 输入框允许使用的最小值,默认无限制
data-numbox-max 输入框允许使用的最大值,默认无限制
data-numbox-step 每次点击 +/- 按钮变化的步长,默认步长为1
方法名:
getValue() 获取当前值
setValue(value) 动态设置新值
setOption(options) 更新选项,可取值
侧滑导航: offcanvas
代码块激活字符: moffcanvas
js API:
方法名:
show() 显示
close() 隐藏
toggle() 切换
事件监听:
事件名:
shown 显示
hidden 隐藏
方法:
isShown() 判断是否为显示状态
弹出菜单:popover
代码块激活字符: mpopover
js的方式控制弹出菜单:mui(‘.bottomPopover‘).popover(status[,anchor]);
status:
show 显示popover
hidden 隐藏popover
toggle 自动识别处理显示隐藏状态
anchor:
anchorElement 锚点元素
选择器:picker
进度条:progressbar
代码块激活字符: mprogressbar
有准确值的进度条:
有准确值的进度条会显示当前进度正处于整体进度的占比位置,用户可以更直观的预期完成时间
使用进度条控件,需要一个进度条控件容器,mui 会自动识别该容器下是否有进度条控件,若没有,则自动创建
透明状态栏:transparenBar
代码块激活字符: mtransparent
个性化定制属性:
data-top 距离顶部高度
data-offset 滚动透明距离
data-duration 过渡时间
data-scrollby 监听区域滚动容器
单选框:radio
代码块激活字符: mradio
mui基于列表控件,提供了列表式单选实现;在列表根节点上增加.mui-table-view-radio类即可,若要默认选中某项,只需要在对应li节点上增加.mui-selected类即可
列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)中可以获得当前选中的dom节点
滑块:range
代码块激活字符: mrange
区域滚动:scroll
轮播组件:slide
代码块激活字符: mslider
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。首先,Dom构造基本相同
开关:switch
代码块激活字符: mswitch
默认开关控件,带on/off文字提示,打开时为绿色背景,基本class类为.mui-switch、.mui-switch-handle
若希望开关默认为打开状态,只需要在.mui-switch节点上增加.mui-active类即可
若希望隐藏on/off文字提示,变成简洁模式,需要在.mui-switch节点上增加.mui-switch-mini类
mui默认还提供了蓝色开关控件,只需在.mui-switch节点上增加.mui-switch-blue类即可
方法:
若要获得当前开关状态,可通过判断当前开关控件是否包含.mui-active类来实现,若包含,则为打开状态,否则即为关闭状态
若使用js打开、关闭开关控件,可使用switch插件的toggle()方法
事件:
开关控件在打开/关闭两种状态之间进行切换时,会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件,可以在开关切换时执行特定业务逻辑
初始化:
mui在mui.init()中会自动初始化基本控件,但是 动态添加的 Switch 组件需要手动初始化