代码拉取完成,页面将自动刷新
由于微信小程序需要每年认证收费,且很多样式审核不能通过,需要企业认证并收年费,本小程序线上版本不再维护更新,线上预览版本将于2025年3月停止服务
ColorUI GA 是基于ColorUI 2.0开发的小程序原生 css 组件库。在原组件库的基础上会增加部分样式和模板,长期更新,如果您有好的想法或对本项目有任何建议以及发现文中内容有误的请提交 Github Issues。对于想要一起开发,补充 CSS 样式库的朋友,欢迎提交 PR。
Uniapp版本可参考ColorUI-GA-Uniapp
开源不易,需要鼓励。给 ColorUI GA 项目点个 star 吧!
注意:个别 H5 预览样式与真机存在差异,以小程序客户端实际样式为准
持续更新,最近更新日期:2023/1/12,预览地址:链接
注意:线上小程序发布周期较慢,最新样式请下载代码运行程序进行预览
完整 UI 模板
单页模板
基础样式
组件设计
扩展组件
/colorui
文件夹到项目根目录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";
app.json
里面的"style": "v2"
,部分样式将失效,请确保删除全局app.json
里面的"style": "v2"
。如确实需要使用新版样式,可在page
中的.json
文件中添加"style": "v2"
。根据项目需要,决定是否自定义导航栏,示例导航栏代码在/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;
}
})
},
app.json
配置取消系统默认导航栏,并全局引入组件"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom/cu-custom"
}
xxx.wxml
页面调用<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
参数 | 作用 | 类型 | 默认值 |
---|---|---|---|
bgColor | 背景颜色类名 | String | '' |
isBack | 是否开启返回 | Boolean | false |
isCustom | 是否开启左侧胶囊 | Boolean | false |
bgImage | 背景图片路径 | String | '' |
isLucency | 背景透明 | Boolean | false |
homePage | 分享时自定义返回页面 | String | '' |
slot 块 | 作用 |
---|---|
backText | 返回时的文字 |
homeText | 分享时的左上角文字 |
content | 中间区域 |
right | 右侧区域(小程序端可使用范围很窄!) |
BUG 待办:
开源/资源库
Issues 突出贡献者
@echome123
|
@a328093070
|
@kongxiyi
|
@VolnaTime
|
star 的朋友们:
如果本项目能为您提供帮助,请给予支持!
请作者喝咖啡
MIT © ColorUI GA
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。