更新记录

1.1.2（2026-05-24） 下载此版本

• [新增] QRCode 二维码组件 文档

1.1.0（2026-05-22） 下载此版本

• [新增] 支持鸿蒙蒸汽模式，HBuilder X 需要 5.08 以上的版本 官方蒸汽模式的文档
• [新增] 新增 TimeFormat 时间格式化组件 文档
• [新增] Search 组件新增 wrapper-class、 input-class 属性 文档
• [修复] 修复 DateTimePicker 组件月份切换异常问题：当从 31 天切换至天数小于 30 天的月份时，选择器滚动位置计算错误、显示错位的问题。
• [修改] Cell 组件 新增 title-text-style 和 value-text-style;
  value-style 和 title-style 不再支持设置字体样式 文档
• [修改] Collapse 组件 新增 title-text-style 、content-text-style 和 value-text-style ;
  value-style 、content-style 和 title-style 不再支持设置字体样式 文档
• [修改] Tabs 组件 新增 line-mode 、init-animate、 text-class 、 active-text-class 、 inactive-text-class 和 disabled-text-class 属性 ;
  item-style 、 active-style 和 inactive-style 不再支持设置字体样式 文档
• [修改] Cascader 组件修改判断逻辑：当配置项 options 最末层级的 children 为空数组或不存在时，将触发 finish 事件 文档
• [修改] 重构了 Slider 组件,组件内部相应的class类名也已变更 文档

1.0.22（2026-03-23） 下载此版本

• [修复] 修复 HBuilderX5.0+ 版本编译不通过的问题
• [修复] 修复 Icon 组件用户引入自定义图标时，部分情况下在 iOS端 不显示的问题
• [优化] 适配 HBuilderX5.0+ class样式隔离策略2.0 策略，官方文档
• [新增] ActionSheet 组件 ActionSheetAction类型 新增 value 字段
• [预告] 即将支持鸿蒙的蒸汽模式

平台兼容性

uni-app x(5.03)

其他

RiceUI

基于 uniapp x 开发的多平台UI框架，采用vue3组合式API进行开发，同时兼容Android、iOS、鸿蒙Next、微信小程序、h5。 一次编写，多端发布，大幅度提高开发效率。支持暗黑模式。RiceUI文档地址

开源协议

本组件库内的所有组件代码完全开源，遵循 MIT开源协议 ，用户可根据MIT开源协议进行使用、修改、分发及商业应用，无需付费。
注意：这并不意味着您可以将RiceUI应用到非法的领域，比如涉及赌博，暴力，欺诈等方面。如因此产生纠纷或法律问题，RiceUI相关方不承担任何责任。
Demo 示例项目使用限制见下

注意：鸿蒙蒸汽模式 需要HBuilder X 5.08 以上的版本 才能正常使用

快速开始

1.在 APP.vue 中 引入基础样式文件

<script></script>

<style>
    @import "@/uni_modules/rice-ui/libs/style/index.css";
</style>

:::warning 如果在HBuilderx 5.0+ 版本后使用且开启了 样式隔离2.0策略 H5端 需在 main.uts 引入基础样式文件，而不是在 APP.vue 中，代码见下 :::

// #ifdef WEB
import "@/uni_modules/rice-ui/libs/style/index.css";
/* 自定义主题色示例 */
// import "./style/theme.css";
// #endif

2.无需通过import 引入组件，直接在项目中使用即可

<rice-button type="primary" text="确定"></rice-button>

3.暗黑模式切换

import { setTheme } from "@/uni_modules/rice-ui"

//使用者需要手动调用 setTheme 方法设置暗黑/明亮模式
const setRiceUiTheme = () => {
    setTheme('dark') //参数传 'dark' 或 'light'
}

自定义颜色主题

1.新建一个 css 文件，自行修改以下颜色变量，其中 rice-theme-light 表示明亮模式，rice-theme-dark 表示暗黑模式。更多颜色变量请查看/libs/style/variables.css文件

/* 自定义主题色示例 */

/* 明亮模式下的主题 */
.rice-theme-light {
    --rice-primary-color: #845ec2;
    --rice-success-color: #4d8076;
    --rice-warning-color: #e6a23c;
    --rice-error-color: #f56c6c;
    /* ....其他你自己要修改的颜色值 */
}

/* 暗黑模式下的主题 */
.rice-theme-dark {
    --rice-primary-color: #6235c2;
    --rice-success-color: #0d8063;
    --rice-warning-color: #e6a23c;
    --rice-error-color: #f56c6c;
    /* ....其他你自己要修改的颜色值 */

}

2.在APP.vue中引入该css文件，假设上述 css 文件是放在 /common/theme.css 下的

<style>
    @import "@/uni_modules/rice-ui/libs/style/index.css";
    /* 自定义主题色示例，注意要放在基础样式文件下面 */
    @import "@/common/theme.css";

</style>

文档地址

rice-ui文档地址

H5在线预览

项目预览

Android扫码后请自行在打开的网页中点击下载最新的apk文件

Demo 下载

点击右上角的 “使用HbuilderX导入示例项目” 即可下载demo

Demo 示例项目使用限制

1. 版权归属：本组件库附带的示例演示项目（Demo）版权归 RiceUI作者 所有，受《中华人民共和国著作权法》及国际版权公约保护。
2. 使用许可：用户可查看、学习及本地运行Demo代码，但禁止将Demo或基于Demo的衍生作品以任何形式提交至各大应用市场（包括但不限于 App Store、Google Play、华为应用市场、小程序平台等）。
3. 其他用途：除上架应用市场外，用户可在非商业展示、技术分享等场景中使用Demo内容，但需保留原作者版权声明。
4. 如果您选择继续使用本组件库，即表示您同意接受这些条款。

问题反馈

点击加入 uni-im 群交流或反馈问题

我们欢迎所有形式的贡献，无论是新功能、Bug的修复、文档的改进还其他任何可改进的地方。

写在最后

• 开源之路确实不易，凌晨还在写代码是常事。若您有任何建议，也请友善表达，我们非常乐意倾听。
• 遇到 BUG 是正常现象，任何程序都难免存在不足之处，希望大家能够多一份理解、多一份耐心。您提出的每一个问题，我们都将努力改进。
• 如果您觉得这个项目对您有帮助，请不要吝啬您的点赞和好评，您的认可就是我们持续努力的最大动力！