开始
兼容小程序、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 大文件上传及管理