# ColorUI-GA

**Repository Path**: lxk2020/ColorUI-GA

## Basic Information

- **Project Name**: ColorUI-GA
- **Description**: 🚀基于ColorUI 2.0开发的小程序css组件库。在原组件库的基础上会增加部分样式和UI模板，长期更新，如果您有好的想法请提交Issues。页面模板努力开发中，每周更新。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 75
- **Forks**: 23
- **Created**: 2022-12-15
- **Last Updated**: 2025-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: weixin, weapp, colorUI, miniprogram

## README

# ColorUI GA

**由于微信小程序需要每年认证收费，且很多样式审核不能通过，需要企业认证并收年费，本小程序线上版本不再维护更新，线上预览版本将于2025年3月停止服务**

ColorUI GA 是基于[ColorUI 2.0](https://github.com/weilanwl/coloruicss)开发的小程序**原生** css 组件库。在原组件库的基础上会增加部分样式和模板，长期更新，如果您有好的想法或对本项目有任何建议以及发现文中内容有误的请提交 [Github Issues](https://github.com/XiaokangLei/ColorUI-GA/issues)。对于想要一起开发，补充 CSS 样式库的朋友，欢迎提交 PR。

**Uniapp**版本可参考[ColorUI-GA-Uniapp](https://github.com/helloh2o/ColorUI-GA-Uniapp/tree/uniapp)

**`开源不易，需要鼓励。给 ColorUI GA 项目点个 star 吧！`**

## 文档&在线预览

**_注意：个别 H5 预览样式与真机存在差异，以小程序客户端实际样式为准_**

- UI 组件在线预览（模板&样式）：[链接](https://xiaokanglei.github.io/ColorUI-GA-Docs/h5/demo.html)
- 商城 UI 模板《北岛小店》：[链接](https://xiaokanglei.github.io/ColorUI-GA-Docs/h5/northlandshop/demo.html)
- 文档地址：[链接](https://xiaokanglei.github.io/ColorUI-GA-Docs/)【努力更新中...】
- 微信扫描预览（或微信小程序搜索 ColorUI GA）

<div align=center>
  <img width="160px" style="border-radius: 5%;" bor src="https://s1.ax1x.com/2022/11/30/zwKDdU.jpg">
</div>

## 模板

持续更新，最近更新日期：2023/1/12，预览地址：[链接](https://xiaokanglei.github.io/ColorUI-GA-Docs/h5/demo.html)

**_注意：线上小程序发布周期较慢，最新样式请下载代码运行程序进行预览_**

**完整 UI 模板**

- 商城 UI 模板《北岛小店》：[H5 预览链接](https://xiaokanglei.github.io/ColorUI-GA-Docs/h5/northlandshop/demo.html)
- 获取源码：小程序首页-->完整 UI 模板

**单页模板**

- 首页 UI 设计模板：2 个
- 个人中心 UI 设计模板：2 个
- 用户列表 UI 设计模板：2 个
- 评论页 UI 设计模板：3 个
- 消息列表 UI 设计模板：2 个
- 音乐播放 UI 设计模板：1 个
- 书籍学习 UI 设计模板：2 个
- 登录注册 UI 设计模板：2 个
- 新闻资讯 UI 设计模板：3 个

**基础样式**

- 布局：基础内外边距、圆角样式；Flex 布局；Grid 布局；float 布局。
- 背景：150+纯色背景；深色、浅色、渐变色和渐变高亮背景；图片背景；文字层透明背景。
- 文本：文本大小、颜色、阴影；文字单行和两行截断；文字左右居中对齐；特殊文字。
- 图标：颜色、大小、阴影；300+图标。
- 按钮：形状、大小、颜色、阴影；镂空样式；块状、操作条按钮；无效状态；图标按钮。
- 标签：形状、大小、颜色、阴影；镂空样式；胶囊样式；提示标签；图标标签。
- 头像：形状、大小、背景颜色；内嵌文字；头像组；头像标签。
- 进度条：大小、颜色；条形、环形；条纹样式；比例、布局样式。
- 阴影：颜色阴影、长阴影；翘边阴影；图片阴影。
- 加载：常规底部加载；样色、状态；弹框加载；顶部进度条加载；扩展样式。
- 标题：6 和基本样式；不同级别；居中。
- 边框：上下左右基本样式；虚线；粗细、颜色。
- 开关：基本样式；自定义图标；绑定事件示例；蛋黄派扩展样式。
- 复选框：单选；复选；大小、颜色、样式。

**组件设计**

- 操作条：顶部和底部操作导航样式；输入框样式。
- 导航栏：Tab 多种样式。
- 列表：宫格列表、菜单列表、消息列表；左滑删除等样式。
- 卡片：新闻、文章三种常用卡片预览样式。
- 表单：输入框；选择器；图片选择；多行文本输入。
- 时间轴：时间轴样式。
- 轮播图：5 种轮播图样式。
- 模态框：8 中 Modal 弹出样式
- 步骤条：三种步骤条设计。
- 轻提示：6 种轻提示弹出样式。
- 状态提示：多种状态设计。
- 评分：星级评分组件。
- 手风琴：文字展开与收起样式。
- 滚动提示：上下左右多种滚动提示。
- 日历：支持农历阳历转换。
- 表格：基本表格样式设计。
- 步进器：商品等数量步进器样式。
- 倒计时：多种天、时、分、秒倒计时样式。

**扩展组件**

- 索引列表：通讯录等索引快速到达样式。
- 微动画：点击触发微动画。
- 全屏抽屉：打开与收起隐藏的抽屉页面。
- 垂直导航：电商等常用导航组件。
- 聊天：仿微信基本聊天页面。
- 瀑布流：图片、商品瀑布流样式。
- 卡片翻转：图片翻转样式。
- 骨架屏：加载显示前的骨架屏样式。
- 抽奖：九宫格滚动抽奖样式。
- 历史搜索：搜索保存历史记录、清除历史记录。
- 打卡：打卡签到页面。
- 卡券：7 种卡券设计；活动卡片、会员卡、优惠券。
- 商品滑动：横向、纵向商品等对象滑动展示。
- 卡片设计：名片、倒数日等设计背景、文字、图标等样式。

## 快速开始

- 1、下载 [源码](https://github.com/XiaokangLei/ColorUI-GA) 并解压，复制`/colorui`文件夹到项目根目录
- 2、`app.wxss`引入关键 css：`main.wxss`,`icon.wxss`

```js
/* 根目录 app.wxss 文件 */
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
/* 若需要使用微动画，请引入 animation.wxss */
@import "colorui/animation.wxss";
/* 若使用暗色模式，请引入 dark.wxss，注意，当前版本暗色模式随系统切换，目前不支持手动切换 */
@import "colorui/dark.wxss";
```

- 3、如果使用新版的组件样式`app.json`里面的`"style": "v2"`，部分样式将失效，请确保删除全局`app.json`里面的`"style": "v2"`。如确实需要使用新版样式，可在`page`中的`.json`文件中添加`"style": "v2"`。

## Demo 快速体验

- 基础表单使用示例，v2.0.9 版本 Demo[下载链接](https://github.com/XiaokangLei/ColorUI-GA/releases/download/v2.0.9/demo.zip)
- 详细使用说明：[【链接】](https://zhuanlan.zhihu.com/p/597197882)

## 自定义顶部导航栏(可选)

根据项目需要，决定是否自定义导航栏，示例导航栏代码在`/colorui/components/cu-custom`中，可自行修改相关参数进行配置。

- 1、`app.js`获得系统信息

```js
onLaunch: function() {
  wx.getSystemInfo({
    success: e => {
      this.globalData.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      this.globalData.Custom = custom;
      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    }
  })
},
```

- 2、`app.json`配置取消系统默认导航栏,并全局引入组件

```js
"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom/cu-custom"
}
```

- 3、`xxx.wxml`页面调用

```html
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
  <view slot="backText">返回</view>
  <view slot="content">导航栏</view>
</cu-custom>
```

- 4、参数

| 参数      |         作用         |  类型   | 默认值 |
| --------- | :------------------: | :-----: | :----: |
| bgColor   |     背景颜色类名     | String  |   ''   |
| isBack    |     是否开启返回     | Boolean | false  |
| isCustom  |   是否开启左侧胶囊   | Boolean | false  |
| bgImage   |     背景图片路径     | String  |   ''   |
| isLucency |       背景透明       | Boolean | false  |
| homePage  | 分享时自定义返回页面 | String  |   ''   |

| slot 块  |                作用                |
| -------- | :--------------------------------: |
| backText |            返回时的文字            |
| homeText |         分享时的左上角文字         |
| content  |              中间区域              |
| right    | 右侧区域(小程序端可使用范围很窄！) |

## 待办

- [ ] 长期：模板设计（每周上新 1-2 个模板），当前 UI 模板个数：20
- [ ] 长期：样式调整与设计。大小、颜色、padding、margin 等
- [x] fix 轮播图左侧图消失 BUG
- [x] 小程序检测到新版本主动更新
- [x] 【基础样式】背景色修改、扩展
- [x] 【基础样式】圆环形状进度条(canvas2D 实现+非 canvas2D 实现) [无预览]【请在小程序端查看】
- [x] 【基础样式】虚线边框和蓝色边框样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/base/border)
- [x] 【组件设计】手风琴向下展开样式&文本展开与收起 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/piano)
- [x] 【组件设计】滚动 Tips(单行、多行、左右、上下) [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/tips)
- [x] 【组件设计】评分样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/rate)
- [x] 【组件设计】轻提示 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/toast)
- [x] 【组件设计】状态提示 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/status)
- [x] 【组件设计】日历样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/calendar)
- [x] 【组件设计】表格样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/table)
- [x] 【扩展样式】瀑布流图片展示样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/waterfall)
- [x] 【扩展样式】卡片翻转样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/overturn)
- [x] 【扩展样式】滚动抽奖样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/draw)
- [x] 【扩展样式】历史搜索样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/search)
- [x] 【扩展样式】打卡签到样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/clockin)
- [x] 【扩展样式】会员卡/卡券样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/coupon)
- [x] 【扩展样式】商品滑动样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/goods)
- [x] 【扩展样式】骨架屏样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/expand/skeleton)
- [x] 【扩展样式】卡片设计 【无预览】【请在小程序端查看】
- [x] 【扩展样式】Emoji(卡片设计中已集成) 【无预览】【请在小程序端查看】
- [x] 【组件设计】日历样式新增农历 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/calendar)
- [x] 【组件设计】新增步进器样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/stepper)
- [x] 【组件设计】新增倒计时样式 [【在线预览】](https://xiaokanglei.github.io/ColorUI-GA-Docs/#/component/countdown)
- [ ] 头像右下角标签设计
- [ ] 广告条设计
- [ ] 图片下载前显示自定义图片

BUG 待办：

- [x] 【扩展样式】全屏抽屉 Android(小米)手机卡顿【2023/1/27】

## 导航收录

- Iconfont 阿里巴巴矢量图标: <https://www.iconfont.cn/>
- 谷歌压缩图片: <https://squoosh.app/>
- tinypng 图片压缩: <https://tinypng.com/>
- ezgif 图片视频处理神器: <https://ezgif.com/>
- 渐变配色: <https://webgradients.com/>
- 在线抠图: <https://www.remove.bg/>
- 新拟态生成: <https://yousiqiexing.com/softui>
- 美叶 UI 参考: <https://www.meiye.art/inspiration>
- 200+免费格式转换: <https://www.alltoall.net/>
- 50 种高质量 SVG 渐变配色案例: <https://svggradients.com/>

## 致谢

开源/资源库

- ColorUI: <https://github.com/weilanwl/ColorUI>
- Lin-UI: <https://github.com/TaleLin/lin-ui>
- Vant: <https://github.com/vant-ui/vant-weapp>
- MeiYe: <https://www.meiye.art/inspiration>
- WxminiDemo: <https://gitee.com/susuhhhhhh/wxmini_demo>

Issues 突出贡献者

<table>
    <tbody>
        <tr>
            <td align="center" valign="middle">
                <a href="https://github.com/echome123" target="_blank">
                    <img width="60px" src="https://avatars.githubusercontent.com/u/103982793?v=4" alt="@echome123">
                    <div>@echome123</div>
                </a>
            </td>
            <td align="center" valign="middle">
                <a href="https://github.com/a328093070" target="_blank">
                    <img width="60px" src="https://avatars.githubusercontent.com/u/20756596?v=4" alt="@a328093070">
                    <div>@a328093070</div>
                </a>
            </td>
            <td align="center" valign="middle">
                <a href="https://github.com/kongxiyi" target="_blank">
                    <img width="60px" src="https://avatars.githubusercontent.com/u/62090058?v=4" alt="@kongxiyi">
                    <div>@kongxiyi</div>
                </a>
            </td>
            <td align="center" valign="middle">
                <a href="https://github.com/VolnaTime" target="_blank">
                    <img width="60px" src="https://avatars.githubusercontent.com/u/89766481?v=4" alt="@VolnaTime">
                    <div>@VolnaTime</div>
                </a>
            </td>
        </tr>
    </tbody>
</table>

star 的朋友们：

[![Stargazers repo roster for @XiaokangLei/ColorUI-GA](https://reporoster.com/stars/XiaokangLei/ColorUI-GA)](https://github.com/XiaokangLei/ColorUI-GA/stargazers)

## 使用了 ColorUI GA 的项目

<p align="center">
    <a href="https://github.com/XiaokangLei/ColorUI-GA/discussions/9"> >> 我的项目想展示在这里<< </a>
</p>

## 支持

**如果本项目能为您提供帮助，请给予支持！**

- 关注公众号 👉 **ColorUI GA**
- 项目 [Github](https://github.com/XiaokangLei/ColorUI-GAv) 点击**右上角 Star :star:**
- 分享小程序给您身边更多的小伙伴

<div align=center>
  <img width="160px" style="border-radius: 5%; margin:0 10%" bor src="https://s1.ax1x.com/2022/11/30/zwKWsx.jpg">
  <img width="160px" style="border-radius: 5%; margin:0 10%" bor src="https://s1.ax1x.com/2022/11/30/zwKDdU.jpg">
</div>

**请作者喝咖啡**

<div align=center>
    <img width="50%" style="border-radius: 5%" bor src="https://pic3.zhimg.com/80/v2-a1225a9a1ea9b01aeb77ca915811fb5e_1440w.webp">
</div>

## License

MIT © [ColorUI GA](https://github.com/XiaokangLei/ColorUI-GA)