mui 总结

折叠面板：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 组件需要手动初始化