coloruicss README

The project's README from github.com/weilanwl/coloruicss. As one markdown file: README.md.

V3 测试版：https://github.com/weilanwl/coloruiBeta

ColorUI简介

素材

ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！ 语雀-ColorUI群资源

前言

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。

交流

微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。

使用UniApp开发

开始

下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录

App.vue 引入关键Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.vue 获得系统信息

onLaunch: function() {
  uni.getSystemInfo({
    success: function(e) {
      // #ifndef MP
      Vue.prototype.StatusBar = e.statusBarHeight;
      if (e.platform == 'android') {
        Vue.prototype.CustomBar = e.statusBarHeight + 50;
      } else {
        Vue.prototype.CustomBar = e.statusBarHeight + 45;
      };
      // #endif
      // #ifdef MP-WEIXIN
      Vue.prototype.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      Vue.prototype.Custom = custom;
      Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      // #endif		
      // #ifdef MP-ALIPAY
      Vue.prototype.StatusBar = e.statusBarHeight;
      Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
      // #endif
    }
  })
},

pages.json 配置取消系统导航栏

"globalStyle": {
  "navigationStyle": "custom"
},

复制代码结构可以直接使用，注意全局变量的获取。

使用封装,在main.js 引入 cu-custom 组件。

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

page.vue 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
  <block slot="backText">返回</block>
  <block slot="content">导航栏</block>
</cu-custom>
参数 作用 类型 默认值
bgColor 背景颜色类名 String ''
isBack 是否开启返回 Boolean false
bgImage 背景图片路径 String ''
slot块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄！)

使用原生小程序开发

从现有项目开始

下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目根目录

App.wxss 引入关键Css main.wxss icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....

从新项目开始

下载源码解压获得/template，复制/template并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

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"
}

page.wxml 页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
  <view slot="backText">返回</view>
  <view slot="content">导航栏</view>
</cu-custom>
参数 作用 类型 默认值
bgColor 背景颜色类名 String ''
isBack 是否开启返回 Boolean false
isCustom 是否开启左侧胶囊 Boolean false
bgImage 背景图片路径 String ''
slot块 作用
backText 返回时的文字
content 中间区域
right 右侧区域(小程序端可使用范围很窄！)

赞赏

License

MIT

Copyright (c) 2020-present, XiaoGang Wen

coloruicss (weilanwl/coloruicss)

Searching Database…

12.4K ·GitHub
Coloruicss
What is this?ColorUI is a bright, high-saturation CSS component library for building UI in WeChat Mini Programs (xiaochengxu) and UniApp projects.
Is it a framework or just a CSS library?It's a plain CSS/SCSS library: you include the stylesheets and then call components via class names, with a few components having simple JS interaction logic included.
How do I add it to my project?For UniApp: download the source, copy the /colorui folder into your project root, then import main.css and icon.css in App.vue. For native Mini Program: copy /colorui into your project and import main.wxss and icon.wxss in App.wxss, or start from the provided /template folder.
Do I need UniApp or the WeChat dev tools to use it?Yes — you use it either inside a UniApp project (Vue-based) or directly in the native WeChat Mini Program developer tool.
Does the custom navbar work the same everywhere?The custom navigation bar component works but has a documented quirk: the 'right' slot area has very limited usable space specifically on the Mini Program side.
Is there a shared design resource or template collection?Yes, there is a community-maintained knowledge base on Yuque where contributors share modified templates and UI assets built with ColorUI.
Is there a V3 version in progress?The README notes a V3 beta is being tested, though details are not fully documented yet.
How do I get support or join the community?You can join the WeChat group (add the developer's WeChat first, noting 'UniApp plugin market') or the QQ group (240787041).
What are similar projects?vant-weapp, mint-ui, vux, weui-wxss, mdb-ui-kit, element, iview, uni-app
Which topics is it in?miniprogram, weixin, vue2, scss, ui-kit, wechat, component-library, vue, ui-components, beginner-friendly, css, ui
Creator
weilanwl
Size
7 MB
Stars
12.4K
Updated
CommitJan 03
Age
8y
Commits · 90 Days