码迷,mamicode.com
首页 > 其他好文 > 详细

mui 总结

时间:2020-07-14 13:07:36      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:取值   业务   共同点   距离   class类   detail   列表   否则   覆盖   

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

mui 总结

标签:取值   业务   共同点   距离   class类   detail   列表   否则   覆盖   

原文地址:https://www.cnblogs.com/xiewangfei123/p/13298452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!