ColorUI文檔（基本元素）
ColorUI 簡(jiǎn)易文檔
1.開始
下載源碼解壓獲得/Colorui-UniApp文件夾，復(fù)制目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄
App.vue 引入關(guān)鍵Css main.css icon.css
<style>
/* 引入colorui主體 */
@import "colorui/main.css";
/* 引入colorui圖標(biāo)類資源 */
@import "colorui/icon.css";
</style>
2.使用自定義導(dǎo)航欄
（1）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
}
})
},
（2）pages.json 配置取消系統(tǒng)導(dǎo)航欄
"globalStyle": { "navigationStyle": "custom" },</pre>
（3）使用封裝,在`main.js` 引入 `cu-custom` 組件。
<pre>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">圖標(biāo)</view></cu-custom>
3.flex布局( "|"表示或，后面涉及同理 )
父級(jí)容器的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）水平對(duì)齊（父容器的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）垂直對(duì)齊（父容器的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）浮動(dòng)（在class加入fl|fr,在父容器class加入cf）
(2)內(nèi)外邊距
size=xs|sm|df|lg|xl
| 外邊距 | margin-{size} |
| 內(nèi)邊距 | padding-{size} |
| 水平方向外邊距 | margin-lr-{size} |
| 水平方向內(nèi)邊距 | padding-lr-{size} |
| 垂直方向外邊距 | margin-tb-{size} |
| 垂直方向內(nèi)邊距 | padding-tb-{size} |
| 上外邊距 | margin-top-{size} |
| 上內(nèi)邊距 | padding-top-{size} |
| 右外邊距 | margin-right-{size} |
| 右內(nèi)邊距 | padding-right-{size} |
| 下外邊距 | margin-bottom-{size} |
| 下內(nèi)邊距 | padding-bottom-{size} |
| 左外邊距 | margin-left-{size} |
| 左內(nèi)邊距 | padding-left-{size} |
6.圖標(biāo)（在class上添加 cuIcon-pepole|check|...）
例如
<text class="cuIcon-people"></text>
**
7.背景
(1)當(dāng)想要深色的背景的時(shí)候，
在class中加入** bg-Red|Orange|...**
<view class="padding radius text-center shadow-blur" :class="'bg-' + name"></view>
(2)當(dāng)想要淡色的背景的時(shí)候，
在class中加入** bg-Red|Orange|...，**
在class中再加入 light
<view class="padding radius text-center light" :class="'bg-' + name"></view>
(3)當(dāng)想要漸變的背景的時(shí)候，
在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）當(dāng)想要背景圖片的時(shí)候，
在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）當(dāng)文字需要透明背景時(shí)
在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 用于圖標(biāo)、數(shù)字等特大顯示
.text-sl 文字大小 40px 用于圖標(biāo)、數(shù)字等較大顯示
.text-xxl 文字大小 22px 用于金額數(shù)字等信息
.text-xl 文字大小 18px 頁面大標(biāo)題，用于結(jié)果頁等單一信息頁
.text-lg 文字大小 16px 頁面小標(biāo)題，首要層級(jí)顯示內(nèi)容
.text-df 文字大小 14px 頁面默認(rèn)字號(hào)，用于摘要或閱讀文本
.text-sm 文字大小 12px 頁面輔助信息，次級(jí)內(nèi)容等
.text-xs 文字大小 10px 說明文本，標(biāo)簽文字等關(guān)注度低的文字
（2）文字顏色（在class中加入 text-red|orange|...）顏色參考7.背景
（3）文字陰影（在class中加入 text-shadow）
（4）文字截?cái)?...(在class中加入 text-cut ,要給定容器寬度)
（5）文字對(duì)齊（在class中加入 text-center|left|right)
（6）特殊文字
text-price 價(jià)格￥
text-Abc 英文單詞首字母大寫
text-abc 全部英文字母小寫
text-ABC 全部英文字母大寫
9.按鈕
（1）按鈕形狀
cu-btn（默認(rèn)） cu-btn round（圓角） cu-btn cuIcon（圖標(biāo)按鈕）
<button class="cu-btn">默認(rèn)</button>
<button class="cu-btn round">圓角</button>
<button class="cu-btn cuIcon">
<text class="cuIcon-emojifill"></text>
</button>
（2）按鈕尺寸
cu-btn sm（小尺寸） cu-btn（默認(rèn)） cu-btn lg（大尺寸）
（3）按鈕顏色
bg-red|...
陰影 shadow
（4）按鈕鏤空
lines-red|... (邊框深） line-red|... ?。ㄟ吙驕\）
（5）按鈕塊狀
cu-btn lg
（6）按鈕無效
disabled
（7）按鈕加圖標(biāo)
<button class="cu-btn block line-orange lg">
<text class="cuIcon-upload"></text> 圖標(biāo)</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>
