✨✨基于ColorUI 2.0开发的小程序css组件库。更多
ColorUI GA 是基于ColorUI 2.0开发的小程序原生 css 组件库。在原组件库的基础上会增加部分样式和模板，长期更新，如果您有好的想法或对本项目有任何建议以及发现文中内容有误的请提交 Github Issues。对于想要一起开发，补充 CSS 样式库的朋友，欢迎提交 PR。
开源不易，需要鼓励。给 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中，可自行修改相关参数进行配置。
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 | '' |
| slot 块 | 作用 |
|---|---|
| backText | 返回时的文字 |
| homeText | 分享时的左上角文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
BUG 待办：
【扩展样式】全屏抽屉 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_demoIssues 突出贡献者
@echome123
|
@a328093070
|
@kongxiyi
|
@VolnaTime
|
star 的朋友们：
>> 我的项目想展示在这里<<
支持如果本项目能为您提供帮助，请给予支持！
关注公众号 ColorUI GA 项目 Github 点击右上角 Star 分享小程序给您身边更多的小伙伴请作者喝咖啡
MIT © ColorUI GA
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
