ColorUI文檔（基本元素）

 uniapp中使用colorUI

1.開始

　　下載源碼解壓獲得/Colorui-UniApp文件夾，復制目錄下的 /colorui 文件夾到你的項目根目錄

　　App.vue 引入關鍵Css main.css icon.css

<style>
    /* 引入colorui主體 */
    @import "colorui/main.css";
    /* 引入colorui圖標類資源 */
    @import "colorui/icon.css";
</style>

 

2.使用自定義導航欄

　　（1）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
        }
    })
},

　　（2）pages.json 配置取消系統導航欄

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

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

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

　　（4）就可以直接在頁面中使用

<cu-custom bgColor="bg-gradual-blue" :isBack="true"><view slot="backText">返回</view><view slot="content">圖標</view></cu-custom>

3.flex布局( "|"表示或，后面涉及同理 )

父級容器的class需要加入flex

　　（1）固定尺寸（ 在class中加入basis-xs|sm|sub|lg|xl    ）

　　　　

例如：
                <view class="flex flex-wrap">
                    <view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
                    <view class="basis-df"></view>
                    <view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
                    <view class="basis-df"></view>
                    <view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
                    <view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
                    <view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
                </view>

　　（2）比例布局（在class中加入flex-sub|twice|treble）

　　　　

例如：
1:1
                <view class="flex">
                    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
                    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
                </view>
1:2
                <view class="flex  p-xs margin-bottom-sm mb-sm">
                    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
                    <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
                </view>
1:2:3
                <view class="flex  p-xs margin-bottom-sm mb-sm">
                    <view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
                    <view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
                    <view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
                </view>

　　（3）水平對齊（父容器的class中加入justify-start|end|center|between|around）

　　　　

例如：
                <view class="flex solid-bottom padding justify-start">
                    <view class="bg-grey padding-sm margin-xs radius">start</view>
                    <view class="bg-grey padding-sm margin-xs radius">start</view>
                </view>
                <view class="flex solid-bottom padding justify-end">
                    <view class="bg-grey padding-sm margin-xs radius">end</view>
                    <view class="bg-grey padding-sm margin-xs radius">end</view>
                </view>
                <view class="flex solid-bottom padding justify-center">
                    <view class="bg-grey padding-sm margin-xs radius">center</view>
                    <view class="bg-grey padding-sm margin-xs radius">center</view>
                </view>
                <view class="flex solid-bottom padding justify-between">
                    <view class="bg-grey padding-sm margin-xs radius">between</view>
                    <view class="bg-grey padding-sm margin-xs radius">between</view>
                </view>
                <view class="flex solid-bottom padding justify-around">
                    <view class="bg-grey padding-sm margin-xs radius">around</view>
                    <view class="bg-grey padding-sm margin-xs radius">around</view>
                </view>

　　（4）垂直對齊（父容器的class中加入align-start|end|center）

　　　　

例如：
                <view class="flex solid-bottom padding align-start">
                    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
                    <view class="bg-grey padding-sm margin-xs radius">start</view>
                </view>
                <view class="flex solid-bottom padding align-end">
                    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
                    <view class="bg-grey padding-sm margin-xs radius">end</view>
                </view>
                <view class="flex solid-bottom padding align-center">
                    <view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
                    <view class="bg-grey padding-sm margin-xs radius">center</view>
                </view>

 

4.Grid布局

　　（1）等分列（class加入grid col-1|2|3|...）

　　　　

　　　　

                <view class="grid margin-bottom text-center" v-for="(item,index) in 5"
                 :key="index" :class="'col-' + (index+1)">
                    <view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'"
                     v-for="(item,indexs) in (index+1)*2" :key="indexs">
                     {{indexs+1}}
                    </view>
                </view>

　　自己試用：

        <view class="grid margin-bottom text-center col-5">
            <view class="padding bg-cyan">{{1}}</view>
            <view class="padding bg-cyan">{{2}}</view>
            <view class="padding bg-cyan">{{3}}</view>
        </view>

　　（2）等高(在class中加入grid col-4|5|... grid-square)

　　　　

　　　　　　　　　　<view class="grid col-4 grid-square">                    
　　　　　　　　　　　　<view class="bg-img" v-for="(item,index) in avatar"
                     :key="index"
                     :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
　　　　　　　　　　</view>

data(){return{
    avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg']
}}

 5.輔助布局

　　（1）浮動（在class加入fl|fr,在父容器class加入cf）

　　　　

 　　(2)內外邊距

　　　　size=xs|sm|df|lg|xl

外邊距	margin-{size}
內邊距	padding-{size}
水平方向外邊距	margin-lr-{size}
水平方向內邊距	padding-lr-{size}
垂直方向外邊距	margin-tb-{size}
垂直方向內邊距	padding-tb-{size}
上外邊距	margin-top-{size}
上內邊距	padding-top-{size}
右外邊距	margin-right-{size}
右內邊距	padding-right-{size}
下外邊距	margin-bottom-{size}
下內邊距	padding-bottom-{size}
左外邊距	margin-left-{size}
左內邊距	padding-left-{size}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6.圖標（在class上添加 cuIcon-pepole|check|...）

例如

<text class="cuIcon-people"></text>

 

 7.背景

　　(1)當想要深色的背景的時候，

　　　　在class中加入 bg-Red|Orange|...

　　<view class="padding radius text-center shadow-blur" :class="'bg-' + name"></view> 

　　

　　(2)當想要淡色的背景的時候，

　　　　在class中加入 bg-Red|Orange|...，

　　　　在class中再加入 light

　　<view class="padding radius text-center light" :class="'bg-' + name"></view>

　　

　　(3)當想要漸變的背景的時候，

　　　　在class中加入 bg-gradual-red|orange|...，

                <view class="bg-gradual-red padding radius text-center shadow-blur">
                    <view class="text-lg">魅紅</view>
                    <view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
                </view>

　　

　　（4）當想要背景圖片的時候，

　　　　在class中加入 bg-img bg-mask

        <view class="bg-img bg-mask flex align-center"
         style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
            <view class="padding-xl text-white">
                <view class="padding-xs text-xxl text-bold">
                    鋼鐵之翼
                </view>
                <view class="padding-xs text-lg">
                    Only the guilty need fear me.
                </view>
            </view>
        </view>

　　（5）當文字需要透明背景時

　　　　在class中加入 bg-shadeBottom|shadeTop

            <view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
                <view class="bg-shadeTop padding padding-bottom-xl">
                    上面開始
                </view>
            </view>
            <view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
                <view class="bg-shadeBottom padding padding-top-xl flex-sub">
                    下面開始
                </view>
            </view>

　　

 

 8.文字

 　　（1）文字大小

　　　　.text-xsl　　文字大小 60px 用於圖標、數字等特大顯示

　　　　.text-sl　　  文字大小 40px 用於圖標、數字等較大顯示

　　　　.text-xxl　　文字大小 22px 用於金額數字等信息

　　　　.text-xl　　  文字大小 18px 頁面大標題，用於結果頁等單一信息頁

　　　　.text-lg　　  文字大小 16px 頁面小標題，首要層級顯示內容

　　　　.text-df　　  文字大小 14px 頁面默認字號，用於摘要或閱讀文本

　　　　.text-sm　    文字大小 12px 頁面輔助信息，次級內容等

　　　　.text-xs　　 文字大小 10px 說明文本，標簽文字等關注度低的文字

　　（2）文字顏色（在class中加入 text-red|orange|...）顏色參考7.背景

　　（3）文字陰影（在class中加入 text-shadow）

　　（4）文字截斷 ...(在class中加入 text-cut  ,要給定容器寬度)

　　（5）文字對齊（在class中加入 text-center|left|right)

　　（6）特殊文字

 　　　　text-price　　價格￥

　　　　 text-Abc　　 英文單詞首字母大寫

　　　　 text-abc　　 全部英文字母小寫

　　　　 text-ABC　   全部英文字母大寫

 

 9.按鈕

　　（1）按鈕形狀

　　　　cu-btn（默認）　　　　cu-btn round（圓角）　　　　cu-btn cuIcon（圖標按鈕）

　　　　

            <button class="cu-btn">默認</button>
            <button class="cu-btn round">圓角</button>
            <button class="cu-btn cuIcon">
                <text class="cuIcon-emojifill"></text>
            </button>

　　（2）按鈕尺寸

　　　　cu-btn sm（小尺寸）　　　　cu-btn（默認）　　　　cu-btn lg（大尺寸）

　　（3）按鈕顏色

　　　　bg-red|...

　　　　陰影      shadow

　　（4）按鈕鏤空

　　　　lines-red|...　　(邊框深）　　　　line-red|...　　（邊框淺）

　　（5）按鈕塊狀

　　　　cu-btn lg

　　（6）按鈕無效

　　　　disabled

　　（7）按鈕加圖標

　　　　

            <button class="cu-btn block line-orange lg">
                <text class="cuIcon-upload"></text> 圖標</button>
            <button class="cu-btn block bg-blue margin-tb-sm lg">
                <text class="cuIcon-loading2 cuIconfont-spin"></text> 加載</button>
            <button class="cu-btn block bg-black margin-tb-sm lg" loading> 原生加載</button>