原文地址：ColorUI

ColorUI專注視覺交互捎稚，擁有極其鮮亮的高飽和色彩桶癣，多種頁面元素可供選擇拥褂，高度自定義的組件，豐富的擴(kuò)展引入牙寞〗染椋基于UniApp多端開發(fā)，一套代碼自適應(yīng)多端口间雀，是多端開發(fā)的前端/設(shè)計(jì)解決方案

ColorUI是一個(gè)css庫；谙辍！惹挟！在你引入樣式后可以根據(jù)class來調(diào)用組件茄螃，一些含有交互的操作我也有簡單寫，可以為你開發(fā)提供一些思路连锯。

使用說明

1. 使用UniApp開發(fā)

下載源碼解壓獲得/Colorui-UniApp文件夾归苍，復(fù)制目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄

App.vue 引入關(guān)鍵Css main.css， icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的項(xiàng)目css,沒有的話刪除就好*/
....
</style>

使用自定義導(dǎo)航欄

導(dǎo)航欄作為常用組件有做簡單封裝运怖，當(dāng)然你也可以直接復(fù)制代碼結(jié)構(gòu)自己修改拼弃，達(dá)到個(gè)性化目的。
App.vue獲得系統(tǒng)信息

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 配置取消系統(tǒng)導(dǎo)航欄

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

復(fù)制代碼結(jié)構(gòu)可以直接使用摇展，注意全局變量的獲取吻氧。

使用封裝,在main.js 引入 cu-custom 組件。

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

page.vue 頁面可以直接調(diào)用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">導(dǎo)航欄</block>
</cu-custom>

2. 使用原生小程序開發(fā)

從現(xiàn)有項(xiàng)目開始

下載源碼解壓獲得/demo医男，復(fù)制目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄

App.wxss 引入關(guān)鍵Css main.wxss icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的項(xiàng)目css,如果沒有那就刪除吧*/

從新項(xiàng)目開始

下載源碼解壓獲得/template，復(fù)制/template并重命名為你的項(xiàng)目捻勉，導(dǎo)入到小程序開發(fā)工具既可以開始你的新項(xiàng)目了

使用自定義導(dǎo)航欄

導(dǎo)航欄作為常用組件有做簡單封裝镀梭，當(dāng)然你也可以直接復(fù)制代碼結(jié)構(gòu)自己修改，達(dá)到個(gè)性化目的踱启。

App.js獲得系統(tǒng)信息

 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 配置取消系統(tǒng)導(dǎo)航欄,并全局引入組件

"window": {
    "navigationStyle": "custom"
},
"usingComponents": {
    "cu-custom":"/colorui/components/cu-custom"
}

page.wxml 頁面可以直接調(diào)用了

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
    <view slot="backText">返回</view>
    <view slot="content">導(dǎo)航欄</view>
</cu-custom>