更新记录
1.0.0(2026-04-30) 下载此版本
- 支持 uni-ui-x 组件库
平台兼容性
uni-app x(5.0)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
项目介绍
uni-ui x,是DCloud为 uni-app x 提供的扩展组件库。
uni-ui x 是全新设计的,与为uni-app做的uni-ui不同。
特点
- 性能 uni-ui x 非常注重性能,在DOM层级控制、包体积、代码执行时间方面精益求精。
它了解 uni-app x 蒸汽模式的最佳实践,尽可能利用模板和样式的预编译特性来提升性能。当然它也支持非蒸汽模式。
- 抽象水平
一个组件的抽象能力非常重要,如何在自定义性、易用性、性能之间尽可能三全其美。
很多组件为了满足使用者的需求,封装的属性越来越多,但组件使用者仍然在抱怨自定义性不足。
尤其是组件把样式封装在组件属性上,造成用户需要自定义样式时无限封装属性,并且这些属性的控制无法使用css变量。
uni-ui x 提供了完全的样式自定义能力,所有的样式定义都可以通过class设置,组件属性只控制功能逻辑。
- 组件的根节点样式,可以在使用组件时的组件class或style上设置。
- 组件的子节点样式,可以通过externalClass设置样式。子组件开放自己的样式出来,外部可通过externalClass进行子组件的样式自定义。
组件使用者完全可以通过css自己控制所有样式。无需修改组件源码。加上css变量加持,灵活度远高于其他组件库。
使用者可以通过css变量完全自定义自己的主题,而不会被组件属性上不能写css变量困扰。
- 为AI设计
uni-ui x 优先代码而不是二进制文件。目前没有引入字体文件。这处于性能考虑,也出于AI友好度考虑。
以箭头为例,uni-ui x 中使用一个view配置左下边框并transform旋转来实现,这种设计性能比字体更好,且AI可以方便的理解这段代码的UI表现,可以在代码层面调整样式。
如果是字体图片,AI很难理解、生成、修改。
再举一个例子,uni-tab下沉midbutton,涉及一个贝塞尔曲线,此时没有使用图片,而是使用svg,同样是为了方便AI理解和修改。
-
没有写死的颜色和文字
-
没有写死的文字,不影响国际化。
-
没有写死的颜色,不影响自定义主题。
uni-ui x 已支持的组件列表
| 组件名 | 组件说明 |
|---|---|
| uni-badge-view | 数字角标 |
| uni-collapse | 折叠面板 |
| uni-drag-cell | 可拖拽排序组件 |
| uni-fab-button | uni-fab-button |
| uni-index-bar | uni-index-bar |
| uni-link | 链接 |
| uni-nav-bar | uni-nav-bar |
| uni-number-box | 数字输入框 |
| uni-rate | 评分 |
| uni-refresh-box | uni-refresh-box |
| uni-tab-bar | 选项卡 |
| uni-time-format | 时间格式化 |
uni-ui的升级建议@uniuiupgrade
为uni-app提供的uni-ui,升级到uni-app x时无法直接对照升级,因为组件名称、用法都有变化。
但升级时,老版uni-ui组件在uni-app x下同等功能的新组件是什么,这里说明下功能映射关系:
| uni-ui组件 | 中文名称 | 在uni-app x下的方案 |
|---|---|---|
| uni-badge | 数字角标 | 改用uni-badge-view |
| uni-calendar | 日历 | 见hello uni-app x里的模板中的日历页面 |
| uni-card | 卡片 | 无 |
| uni-collapse | 折叠面板 | 改用uni-collapse |
| uni-combox | 组合框 | 无 |
| uni-countdown | 倒计时 | 无 |
| uni-data-checkbox | 数据选择器 | 无 |
| uni-data-picker | 数据驱动的picker选择器 | 组件本身支持uni-app x |
| uni-dateformat | 日期格式化 | 改用uni-time-format |
| uni-datetime-picker | 日期选择器 | 内置组件picker支持mode=date |
| uni-drawer | 抽屉 | 改用内置组件page-container |
| uni-easyinput | 增强输入框 | 无 |
| uni-fab | 悬浮按钮 | 改用uni-fab-button |
| uni-fav | 收藏按钮 | 无 |
| uni-file-picker | 文件选择上传 | 无 |
| uni-forms | 表单 | 改用内置组件form |
| uni-goods-nav | 商品导航 | 无 |
| uni-grid | 宫格 | 无 |
| uni-group | 分组 | 无 |
| uni-icons | 图标 | 无 |
| uni-indexed-list | 索引列表 | 改用uni-index-bar |
| uni-link | 超链接 | 改用uni-link |
| uni-list | 列表 | 使用内置组件list |
| uni-load-more | 加载更多 | 使用内置组件loading |
| uni-nav-bar | 自定义导航栏 | 改用uni-nav-bar |
| uni-notice-bar | 通告栏 | 无 |
| uni-number-box | 数字输入框 | 改用uni-number-box |
| uni-pagination | 分页器 | 无 |
| uni-popup | 弹出层 | 改用内置组件page-container |
| uni-rate | 评分 | 改用uni-rate |
| uni-row | 布局-行 | 无 |
| uni-search-bar | 搜索栏 | 无 |
| uni-segmented-control | 分段器 | 无 |
| uni-steps | 步骤条 | 无 |
| uni-swipe-action | 滑动操作 | 参考hello uni-app x模板中可左滑删除长列表示例 |
| uni-swiper-dot | 轮播图指示点 | 改用内置组件swiper,通过externalClass控制指示点样式 |
| uni-table | 表格 | 推荐使用rich-text或web-view中的table。 |
| uni-tag | 标签 | 无 |
| uni-title | 章节标题 | 无 |
| uni-transition | 过渡动画 | 无 |
标记为无的,大多比较简单,对于AI而言直接写相关UI比下载学习一个组件更合适。

收藏人数:
https://gitcode.com/dcloud/uni-ui-x
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 2
赞赏 0
下载 11757985
赞赏 1911
赞赏
京公网安备:11010802035340号