UI组件

<h3 id="accordion折叠面板">accordion(折叠面板)


        面板1子内容

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可。

数字角标一般和其他控件（列表，9宫格，选项卡等）配合使用，用于进行数量的提示。

角标的核心类是`.mui-badge`，默认为实心灰色背景；

mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标、

mui-badge 实心灰色

mui-badge-primary 蓝色

mui-badge-success 绿色

mui-badge-warning 黄色

mui-badge-danger 红色

mui-badge-purple 紫色

若无需底色，则增加.mui-badge-inverted类即可

mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮；

在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮
```
  
```
默认按钮有底色，运行效果如下：
若希望无底色、有边框的按钮，仅需增加.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

卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等
使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：
```
  
      
      
      
      
      
  
```
卡片页眉及内容区，均支持放置图片；页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：
```
  
```
若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类
```
  
      发表于 2016-06-30 15:30
      
  
```

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：
```
  checkbox左侧显示示例
    
```
若要禁用checkbox，只需在checkbox上增加disabled属性即可；

组件名         作用  
alert        警告框    
confirm      确认框    
prompt       输入对话框  
toast        消息提示框

mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示

alert

    .alert( message,title,btnValue,callback [,type] )
message
Type: String
提示对话框上显示的内容
title
Type: String
提示对话框上显示的标题
btnValue
Type: String
提示对话框上按钮显示的内容
callback
Type: Function
提示对话框上关闭后的回调函数
type
Value: 'div'
是否使用h5绘制的对话框</code></pre>
confirm
    .confirm( message,type] )
    message
    Type: String
    提示对话框上显示的内容
    title
    Type: String
    提示对话框上显示的标题
    btnValue
    Type: Array
    提示对话框上按钮显示的内容
    callback
    Type: Function
    提示对话框上关闭后的回调函数
    type
    Value: 'div'
    是否使用h5绘制的对话框
prompt
    .prompt( message,placeholder,callback[,type] )
    message
    Type: String
    提示对话框上显示的内容
    placeholder
    Type: String
    编辑框显示的提示文字
    title
    Type: String
    提示对话框上显示的标题
    btnValue
    Type: Array
    提示对话框上按钮显示的内容
    callback
    Type: Function
    提示对话框上关闭后的回调函数
    type
    Value: 'div'
    是否使用h5绘制的对话框

如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式

toast
.toast( message [,options])
message:'String' - 消息框显示的文字内容
options: {JSON}  - 提示消息的参数
**options 参数需要mui v3.5+支持
参数                  说明                                     说明

duration        持续显示时间,默认值 short(2000ms)            支持 整数值 和 String,String可选: long(3500ms),short(2000ms)

type            强制使用mui消息框(div模式)                   'div'
mui.toast('登陆成功',{ duration:'long',type:'div' }) 

closePopup
.closePopup()(只能关闭h5模式的对话框)
关闭最后一次弹出的对话框
closePopups
.closePopups()(只能关闭h5模式的对话框)
关闭所有对话框



DOM结构 默认不支持循环播放，DOM结构如下：

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

`checkbox左侧显示示例`

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

DOM结构默认不支持循环播放，DOM结构如下：

猜你在找的HBuilder相关文章

UI组件

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下： checkbox左侧显示示例 若要禁用checkbox，只需在checkbox上增加disabled属性即可；

DOM结构 默认不支持循环播放，DOM结构如下：

猜你在找的HBuilder相关文章

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

`checkbox左侧显示示例`

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

DOM结构默认不支持循环播放，DOM结构如下：