Dux UI

兼容小程序、APP、鸿蒙、H5的移动端ui组件库，提供了60+个组件，帮助你快速完成业务

安装

yarn duxapp app add duxui

此模块需要在 duxapp 框架 中运行

示例

• 小程序

  

• APP https://app.share.dux.plus/cn.duxapp.duxui

• H5 https://duxui.duxapp.cn/

• 鸿蒙 需要自行运行代码并编译查看

示例代码

如需查看使用方法请安装duxuiExample模块查看

yarn duxapp app add duxuiExample

如果你还没有 duxapp 项目，你可以使用下面的命令，快速创建一个 duxapp 项目

npx duxapp-cli create projectExample duxuiExample

然后根据运行结果提示，执行不同的命令，运行不同的端

组件库

基础组件

• Button 按钮
• Cell 单元格
• LinearGradient 渐变
• BoxShadow 阴影
• Loading 加载动画
• Icon 图标

布局组件

• Column flex竖向
• Row flex横向
• Space 间距
• BoxShadow 阴影
• Divider 分割线
• Grid 宫格
• Card 卡片

导航组件

• Header 头部导航
• Tab 选项卡切换
• TabBar 底部导航
• BoxShadow 阴影
• Elevator 电梯楼层
• Menu 下拉菜单

表单组件

• Form 表单
• Input 输入框
• Textarea 多行文本
• Picker 选择器
• Date 日期时间
• Radio 单选
• Checkbox 多选
• Radio 单选
• Switch 开关
• Radio 单选
• Calendar 日历
• Grade 评分
• Cascade 级联选择
• CardSelect 卡片选择器
• Upload 上传
• ModalForm 弹出表单
• ModalForms 弹出复杂表单(对象数组)
• NumberKeyboard 数字键盘
• InputCode 验证码密码输入
• LicensePlate 车牌号输入
• Recorder 录音

展示组件

• Text 文本
• Image 图片
• Badge 徽标
• Tag 标签
• Avatar 头像
• HtmlView 富文本
• Step 步骤条
• Empty 空数据
• Status 角标状态

操作反馈

• LongPress 长按
• TouchableOpacity 触摸反馈
• Layout 布局计算
• TopView 顶层容器
• Absolute 绝对定位
• PullView 弹出层
• Modal 弹框
• DropDown 下拉菜单
• loding 显示加载动画
• message 消息通知
• confirm 确认弹框

内容优化

• List 分页列表
• Detail 内容详情

高级

• Share 分享系统
• Chart echarts图表
• Map 地图
• Sign 签名
• HorseLanternLottery 跑马灯抽奖
• UploadManage 大文件上传及管理