赞助商

UI组件

发布时间:2019-02-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了UI组件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

    面板1子内容

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

<h3 id="actionsheet操作表">actionsheet(操作表)
<h3 id="badge数字角标">badge(数字角标)

  • 数字角标一般和其他控件(列表,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类即可

<h3 id="button按钮">button(按钮)

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

<h4 id="普通按钮">普通按钮

  • 在button节点上增加.mui-btn类,即可生成默认按钮;若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮

      
  • 默认按钮有底色,运行效果如下:

  • 若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可,代码如下:

      
  • 运行效果如下:

<h4 id="加载按钮">加载按钮

属性名                       作用
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

<h3 id="cardview卡片视图">cardview(卡片视图)

  • 卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等

  • 使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:

      
  • 卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:

      
  • 若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body类

      
    发表于 2016-06-30 15:30

<h3 id="checkbox复选框">checkbox(复选框)

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

      
    checkbox左侧显示示例
  • 若要禁用checkbox,只需在checkbox上增加disabled属性即可;

<h3 id="dialog对话框">dialog(对话框)

组件名         作用  
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绘制的对话框

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模式的对话框)
关闭所有对话框

<h3 id="gallery图片轮播">gallery(图片轮播)

  • DOM结构 默认不支持循环播放,DOM结构如下:

      

*若要支持循环,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:

总结

以上是脚本之家为你收集整理的UI组件全部内容,希望文章能够帮你解决UI组件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签:
猜你在找的HBuilder相关文章
其他相关热搜词更多
gitSVNgithubsvn教程tortoisegisvn类内置svn函数svn版本HBuildergit自动部署调用SVN命令ctype_digigiteempvue开发gmpvue开发ggithub预览Node.js搭建git安装docsifytagit
全站导航更多
最新HBuilder教程
热门HBuilder教程