移动端UI框架mux-ui

  • 移动端UI框架mux-ui
  • 安装
  • 组件
    • Actionsheet组件
    • 按钮Button组件
    • 头像Avatar组件
    • Cell组件
    • Card组件
    • Alert组件
    • Confirm组件
    • Prompt组件
    • Field组件
    • RadioGroup组件
    • Radio组件
    • Checkbox组件
    • Switch组件
    • Header组件
    • Sticky组件
    • Tab组件
    • TabItem组件
    • Fold组件
    • Tree组件

移动端UI框架mux-ui

从2014年起，在前端摸爬滚打至今，做了不少项目。期间使用过不少的前端框架，其中Vue框架做过的项目最多。用Vue开发了许多的组件，空闲时间整理出来。成了现在的mux-ui。

安装

  npm install @niyang-es/mux-ui --save

组件

mux-ui主要有:

  • Actionsheet组件；
  • 按钮Button组件；
  • 头像Avatar组件；
  • Cell组件；
  • Card组件；
  • 弹窗组件，包括Alert、Confirm、Prompt；
  • 表单组件，包括Field、Radio、Checkbox，Switch；
  • 头部Header组件。
  • 粘性Sticky组件;
  • 切换卡Tab组件，包括TabItem、TabSlider组件；
  • 折叠Fold组件；
  • 树Tree组件；
    其他组件正在开发中。

Actionsheet组件

属性 类型 默认值 描述 备注
items string[]/object[] [] 组件展示的数据项 items为对象数组时，每一项必须含name，即：{name:string,[prop:value]}
value boolean false 控制组件是否显示
cancel boolean/object false 控制是否显示取消按钮或者自定义取消按钮 自定义取消按钮{text:string}
zIndex number 2020 阴影层的层级
closeOnMaskClick boolean true 点击阴影层是否隐藏组件

按钮Button组件

属性 类型 默认值 描述 备注
block boolean false 表现块元素
disabled boolean false 按钮disabled状态
plain boolean 空心按钮
size string 按钮尺寸,定义了small/normal/large三种尺寸
color string 按钮颜色,定义了default/primary/danger/error四种颜色

头像Avatar组件

属性 类型 默认值 描述 备注
src string ‘’ 头像地址 需要完整的url地址
alt string avatar 图片的占位符
size string/number 30 头像尺寸
flat boolean false 扁平化
fit string all 图片适配宽高

Cell组件

属性 类型 默认值 描述 备注
arrow boolean false 是否有箭头
direction string row 定义cell的方向,row行/column列
align string start 弹性布局的item-align的属性
justify string start 弹性布局content-justify的属性

Card组件

属性 类型 默认值 描述 备注
header string 卡片头部
content string 卡片内容
footer string 卡片底部

Alert组件

属性 类型 默认值 描述 备注
title string 提示
value boolean false
zIndex number 2020
transition string mux-bounce
message string ‘’
btnText string 确定

Confirm组件

属性 类型 默认值 描述 备注
title string 提示
value boolean false
zIndex number 2020
transition string mux-bounce
message string ‘’
cancelBtnText string 取消
confirmBtnText string 确定

Prompt组件

属性 类型 默认值 描述 备注
title string 提示
type string text input的type属性
rules array [] 数组项function(v){return boolean
value boolean false
zIndex number 2020
transition string mux-bounce
cancelBtnText string 取消
confirmBtnText string 确定

Field组件

属性 类型 默认值 描述 备注
type string text input类型，含H5输入类型email, number, password, search, tel, text, url
id string ‘’
attrs object
required boolean false
label string ‘’
disabled boolean false
name string XFeild
value string ‘’
placeholder string 请输入
clearable boolean true
readonly boolean false
labelClass string/array []
align string left 文字对齐方式left, center, right
plain boolean false
rounded boolean false
invalid boolean false
message string ‘’

RadioGroup组件

属性 类型 默认值 描述 备注
block boolean false
value string
reverse boolean false 反向

Radio组件

属性 类型 默认值 描述 备注
label string ‘’
id string ‘’
name string ‘XRadio’
checked boolean false
disabled boolean false
value string
radioValue string ‘’

Checkbox组件

属性 类型 默认值 描述 备注
value array []
name string
id string ‘’
checked boolean false
disabled boolean false
partial boolean false
label string ‘’
checkboxValue string ‘’

Switch组件

属性 类型 默认值 描述 备注
onValue string/boolean/number true
offValue string/boolean/number false
disabled boolean false
readonly boolean false
value string/boolean/number true

Header组件

属性 类型 默认值 描述 备注
fixed boolean false
back object/boolean] true
title string ‘’
more boolean/bject false

Sticky组件

属性 类型 默认值 描述 备注
top number/string 0
left number/string auto
right number/string auto
bottom number/string auto

Tab组件

属性 类型 默认值 描述 备注
hideSlider boolean false
sliderSize number 70
site string bottom silder的位置top, bottom
fillCell boolean false
maxCell number 6

TabItem组件

属性 类型 默认值 描述 备注
actived boolean false

Fold组件

属性 类型 默认值 描述 备注
title string ‘’
value boolean false

Tree组件

属性 类型 默认值 描述 备注
value array []
items array []
itemText string name
itemValue string id
itemChildren string children
checked boolean false
lazy boolean false
loadChildren function (id) => { }
useCheckbox boolean false
open boolean false

Vue移动端UI框架mux-ui相关推荐

  1. 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui

    看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...

  2. jQuery的UI框架 Liger UI

    jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui

  3. uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！

    uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...

  4. python 移动ui框架_Touch UI：基于vue的移动端UI框架

    Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...

  5. 推荐一款多平台快速开发的前端UI框架 —— uView UI

    本人体验了一遍,风格简约,功能齐全,正是心心念念的前端UI框架 配合uni-app 真正是一款多平台开发的神器!! 强烈推荐!! 官网直达:uView UI 体验链接:uView多平台前端开发UI - ...

  6. 关于uni-app的ui库、ui框架、ui组件

    首先需要3个新认知: 传统vue的库,只是for web的,不能跨多端. 而微信小程序的库,虽然也可以用于app,但不能跨到h5和百度支付宝等其他小程序. 比如element-ui.mint-ui只能 ...

  7. 基于 jQuery 的前端 UI 框架 LuLu UI

    LuLu UI 详细介绍 LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件. 上手简单 lulu整个项 ...

  8. jQueryHTML5 UI框架Ignite UI 13.2新功能大揭秘（二）

    Ignite UI框架新功能 兼容jQuery 2.0. 浏览器历史记录支持整合开源history.js库. 在触屏设备上为所有Ignite UI组件执行"fast click"功 ...

  9. vue移动端优秀框架收集

    古人曰:"欲善其功,必先利其器."工匠想要使他的工作做好,一定要先让工具锋利.我们何尝不也是一个手艺人?所以选择对的开发框架很重要.一个好的框架可以高效快速的帮我们完成任务,升职加 ...

  10. 新一代嵌入式UI框架 HaaS UI 使用JS在嵌入式开发炫酷前端

    HaaS UI 是一款面向AIoT 领域的渐进式JS应用开发框架,以移动开发理念有效降低开发者研发AIoT带屏应用难度. 理念 移动开发模式,全面拥抱JavaScritp开源生态,且系统服务通过统一的 ...

最新文章

  1. oracle11gr2查看数据库状态,Oracle 11gR2数据库文件丢失后的恢复测试
  2. linux下tomcat部署
  3. php soap详解,关于PHP+SOAP详解
  4. CSS深入浅出（三）
  5. apache php 3秒,php版本(5.3,5.5,7.0)及运行模式(fast-cgi/fpm,apache模块)之间性能对比测试...
  6. c语言怎么产生随机字母,菜鸟求助，写一个随机输出26个英文字母的程序
  7. Golang map 三板斧第二式：注意事项
  8. Fiddler改包场景03——拦截响应，修改响应，放行响应
  9. 【ACL2020】关于正式风格迁移的数据增强方法
  10. 最简单的数据地图制作，只要6步就搞定！
  11. 腾讯云服务器被黑客攻击的解决办法
  12. 基于眼电信号（EOG）的眨眼检测算法
  13. 华大单片机开发板HC32L13X上手入门
  14. 不干胶标签有哪些优点呢？
  15. 国家与地区缩写 + 各国语言缩写
  16. “没有40K当什么程序员？”
  17. java获取text plain_获取text/plain格式http请求中的数据
  18. 如何用word 2007在指定页插入页码和页眉页脚？
  19. 若依前端分离框架-修改关于若依文字的网页标题
  20. 4.案例 - NIO实现TCP通信

热门文章

  1. 使用朴素贝叶斯进行问卷分析（C++）
  2. 微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇
  3. 编写Android app更新模块遇到的问题分析与总结
  4. Cocos2d-x12和NDK-r8编译android
  5. 北大青鸟java项目实践_s2 北大青鸟Java S2 八个上机考试项目 Develop 249万源代码下载- www.pudn.com...
  6. php邮件服务器搭建,php发送邮件，不需要搭建邮件服务器方法
  7. 安润网提供的游戏下载，您可以到安润网的论坛中下载，无须注册。
  8. python中怎样向字典中添加值_python怎么向字典中添加值
  9. 免费做淘宝TOP Taoapi.com测试平台历程
  10. 如何保证按时上床睡觉？