ColorUI GA

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

Uniapp版本可参考ColorUI-GA-Uniapp

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

文档&在线预览

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

UI 组件在线预览（模板&样式）：链接
商城 UI 模板《北岛小店》：链接
文档地址：链接【努力更新中...】
微信扫描预览（或微信小程序搜索 ColorUI GA）

模板

持续更新，最近更新日期：2023/1/12，预览地址：链接

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

完整 UI 模板

商城 UI 模板《北岛小店》：H5 预览链接
获取源码：小程序首页-->完整 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、下载源码并解压，复制/colorui文件夹到项目根目录
2、app.wxss引入关键 css：main.wxss,icon.wxss

/* 根目录 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下载链接
详细使用说明：【链接】

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

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

1、app.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配置取消系统默认导航栏,并全局引入组件

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

3、xxx.wxml页面调用

<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	''