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
这是什么？ColorUI 是一款色彩鲜明、饱和度很高的 CSS 组件库，用于在微信小程序和 UniApp 项目中搭建界面。
它是框架还是只是 CSS 库？它是普通的 CSS/SCSS 库：引入样式表后，通过类名调用组件，其中少数组件内置了简单的 JS 交互逻辑。
怎样把它添加到我的项目里？UniApp 项目：下载源码，把 /colorui 文件夹复制到项目根目录，然后在 App.vue 中导入 main.css 和 icon.css。原生小程序：把 /colorui 复制到项目中，然后在 App.wxss 中导入 main.wxss 和 icon.wxss；也可以直接使用提供的 /template 文件夹作为起点。
用它需要 UniApp 或微信开发者工具吗？需要。你可以在 UniApp 项目（基于 Vue）中使用它，也可以直接在原生微信小程序开发者工具中使用。
自定义导航栏在所有地方的表现都一样吗？自定义导航栏组件可以正常工作，但文档中记录了一个特殊问题：'right' 插槽区域的可用空间非常有限，这一点在小程序端尤为明显。
有没有共享的设计资源或模板合集？有。语雀上有一个社区维护的知识库，贡献者在这里分享基于 ColorUI 修改的模板和 UI 素材。
有没有正在开发中的 V3 版本？README 提到 V3 测试版正在进行测试，但具体细节尚未完整记录。
怎样获取支持或加入社区？你可以加入微信群（先添加开发者的微信，并备注“UniApp插件市场”），或加入 QQ 群（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