ColorUI GA：基于 ColorUI 的高颜值 UI 组件库
ColorUI GA 是基于 ColorUI 2.0 版本进行二次开发的轻量、可靠、高颜值小程序原生 CSS UI 组件库，开源免费。除了 ColorUI 内置组件外，还新增了许多实用组件，并且提供多种类型的免费页面模板，开发者可以直接使用。
该库涵盖了以下组件：
- 布局、背景、文本、图标、按钮、标签、头像
- 进度条、阴影、标题、边框、加载、开关、列表
- 卡片、表单、步骤条、日历、手风琴、表格、倒计时
- 瀑布流、骨架屏、评分、状态提示框、模态框、抽奖转盘、打卡机等等
部分组件预览
部分模板预览
除了原生小程序，还支持 uniapp。以下为配置方式：
/* 根目录 app.wxss / app.vue 文件 */
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
/* 若需要使用微动画，请引入 animation.wxss */
@import "colorui/animation.wxss";
/* 若使用暗色模式，请引入 dark.wxss */
@import "colorui/dark.wxss";
自定义导航栏
通过配置 navigationStyle，可以设置自定义导航栏：
// 配置自定义导航栏
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom": "/colorui/components/cu-custom/cu-custom"
}
导航栏使用示例
// 页面引入组件
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
组件使用示例
<scroll-view scroll-y class="DrawerWindow" :class="modalName=='viewModal'?'show':''">
<view class="cu-list menu card-menu shadow-lg">
<view class="cu-item arrow" v-for="(item,index) in mainTypes" :key="index" @click="toAbout(item)">
<view class="content">
<text class="text-grey">{{item.name}}</text>
</view>
</view>
</view>
</scroll-view>
更多前端资源推荐，欢迎关注《前端资源推荐》公众号，收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源等内容。
GitHub：https://github.com/XiaokangLei/ColorUI-GA
官方文档：https://xiaokanglei.github.io/ColorUI-GA-Docs/#/README