跳到主要内容

开始

组件效果

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

安装​

yarn duxapp app add duxui

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

示例​

  • 在线示例
  • 小程序

示例代码​

如需查看使用方法请安装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 大文件上传及管理