/ColorUI-GA

✨✨基于ColorUI 2.0开发的小程序css组件库。更多样式+免费UI模板🚀🚀

Primary LanguageJavaScript

ColorUI GA

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

非常感谢ColorUI 2.0作者开源代码，本代码在此基础上进行开发。

如果本项目能为您提供帮助，请右上角 star 给予支持！

文档&在线预览

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

  • 在线预览（模板&样式）：链接
  • 文档地址：链接【努力更新中...】
  • 微信扫描预览（或微信小程序搜索 ColorUI GA）

模板

最近更新：2023/1/5，预览地址：链接

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

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

快速开始

  • 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"。
  • 4、【注意】部分样式需要 page 中的 wxss 样式一起使用才能看到完整效果，请注意查看源码

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 ''
slot 块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄！)

待办

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

导航收录

致谢

支持

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

  • 关注公众号 👉 ColorUI GA
  • 项目 Github 点击右上角 Star ⭐
  • 分享小程序给您身边更多的小伙伴