ColorUI 簡易 使用文檔

• 友情鏈接
• 文本大小
• 顏色
• 圖片
• 頭像
• 邊距
• 輔助樣式
• 陰影
• 布局
• 列表

友情鏈接

ColorUI使用文檔

看云： https://www.kancloud.cn/als24/color/1141392

ColorUI H5

H5： http://demo.color-ui.com/h5.html#/

參考文章鏈接

簡書： https://www.jianshu.com/p/450527d7239a#comments

文本大小

xssmdflgxlxxlslxsl

20upx	24upx	28upx	32upx	36upx	44upx	80upx	120upx
10px	12px	14px	16px	18px	22px	40px	60px

/* 大小 */ .text-xs{font-size:20upx} .text-sm{font-size:24upx} .text-df{font-size:28upx} .text-lg{font-size:32upx} .text-xl{font-size:36upx} .text-xxl{font-size:44upx} .text-sl{font-size:80upx} .text-xsl{font-size:120upx}/* 特殊 */ .text-Abc{text-transform:Capitalize} .text-ABC{text-transform:Uppercase} .text-abc{text-transform:Lowercase} .text-price::before{content:"￥";font-size:80%;margin-right:4upx} .text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .text-bold{font-weight:700} .text-center{text-align:center} .text-content{line-height:1.6} .text-left{text-align:left} .text-right{text-align:right}

顏色

文字顏色

.line-red,.lines-red,.text-red{color:#e54d42} .line-orange,.lines-orange,.text-orange{color:#f37b1d} .line-yellow,.lines-yellow,.text-yellow{color:#fbbd08} .line-olive,.lines-olive,.text-olive{color:#8dc63f} .line-green,.lines-green,.text-green{color:#39b54a} .line-cyan,.lines-cyan,.text-cyan{color:#1cbbb4} .line-blue,.lines-blue,.text-blue{color:#0081ff} .line-purple,.lines-purple,.text-purple{color:#6739b6} .line-mauve,.lines-mauve,.text-mauve{color:#9c26b0} .line-pink,.lines-pink,.text-pink{color:#e03997} .line-brown,.lines-brown,.text-brown{color:#a5673f} .line-grey,.lines-grey,.text-grey{color:#8799a3} .line-gray,.lines-gray,.text-gray{color:#aaa} .line-black,.lines-black,.text-black{color:#333} .line-white,.lines-white,.text-white{color:#fff}

背景顏色

.bg-red{background-color:#e54d42;color:#fff} .bg-orange{background-color:#f37b1d;color:#fff} .bg-yellow{background-color:#fbbd08;color:#333} .bg-olive{background-color:#8dc63f;color:#fff} .bg-green{background-color:#39b54a;color:#fff} .bg-cyan{background-color:#1cbbb4;color:#fff} .bg-blue{background-color:#0081ff;color:#fff} .bg-purple{background-color:#6739b6;color:#fff} .bg-mauve{background-color:#9c26b0;color:#fff} .bg-pink{background-color:#e03997;color:#fff} .bg-brown{background-color:#a5673f;color:#fff} .bg-grey{background-color:#8799a3;color:#fff} .bg-gray{background-color:#f0f0f0;color:#333} .bg-black{background-color:#333;color:#fff} .bg-white{background-color:#fff;color:#666}.light{}.bg-gradual-red{background-image:linear-gradient(45deg,#f43f3b,#ec008c);color:#fff} .bg-gradual-orange{background-image:linear-gradient(45deg,#ff9700,#ed1c24);color:#fff} .bg-gradual-green{background-image:linear-gradient(45deg,#39b54a,#8dc63f);color:#fff} .bg-gradual-purple{background-image:linear-gradient(45deg,#9000ff,#5e00ff);color:#fff} .bg-gradual-pink{background-image:linear-gradient(45deg,#ec008c,#6739b6);color:#fff} .bg-gradual-blue{background-image:linear-gradient(45deg,#0081ff,#1cbbb4);color:#fff}

圖片

<view class="bg-img bg-mask" style="background-image: url('')">遮罩 </view><view class="bg-img" style="background-image: url('')">透明 </view><view class="bg-img" style="background-image: url()"></view> <view class="bg-img" :style="'background-image: url(' + i.img + ')'"></view>

頭像

roundradiussmdflgxl

圓	圓角	48upx	64upx	96upx	128upx
		24px	32px	48px	64px

<view class="cu-avatar"></view><view class="cu-avatar">文字圖標</view><view class="cu-avatar"><text>圖標</text></view><view class="cu-avatar" style="background-image: url()"></view> <view class="cu-avatar" :style="'background-image: url(' + i.img + ')'"></view><!-- 其他 -->

邊距

xssmdflgxl

10upx	20upx	30upx	40upx	50upx
5px	10px	15px	20px	25px

margin

.margin-0{margin:0} .margin-xs{margin:10upx} .margin-sm{margin:20upx} .margin{margin:30upx} .margin-lg{margin:40upx} .margin-xl{margin:50upx} .margin-top-xs{margin-top:10upx} .margin-top-sm{margin-top:20upx} .margin-top{margin-top:30upx} .margin-top-lg{margin-top:40upx} .margin-top-xl{margin-top:50upx} .margin-right-xs{margin-right:10upx} .margin-right-sm{margin-right:20upx} .margin-right{margin-right:30upx} .margin-right-lg{margin-right:40upx} .margin-right-xl{margin-right:50upx} .margin-bottom-xs{margin-bottom:10upx} .margin-bottom-sm{margin-bottom:20upx} .margin-bottom{margin-bottom:30upx} .margin-bottom-lg{margin-bottom:40upx} .margin-bottom-xl{margin-bottom:50upx} .margin-left-xs{margin-left:10upx} .margin-left-sm{margin-left:20upx} .margin-left{margin-left:30upx} .margin-left-lg{margin-left:40upx} .margin-left-xl{margin-left:50upx} .margin-lr-xs{margin-left:10upx;margin-right:10upx} .margin-lr-sm{margin-left:20upx;margin-right:20upx} .margin-lr{margin-left:30upx;margin-right:30upx} .margin-lr-lg{margin-left:40upx;margin-right:40upx} .margin-lr-xl{margin-left:50upx;margin-right:50upx} .margin-tb-xs{margin-top:10upx;margin-bottom:10upx} .margin-tb-sm{margin-top:20upx;margin-bottom:20upx} .margin-tb{margin-top:30upx;margin-bottom:30upx} .margin-tb-lg{margin-top:40upx;margin-bottom:40upx} .margin-tb-xl{margin-top:50upx;margin-bottom:50upx}

padding

.padding-0{padding:0} .padding-xs{padding:10upx} .padding-sm{padding:20upx} .padding{padding:30upx} .padding-lg{padding:40upx} .padding-xl{padding:50upx} .padding-top-xs{padding-top:10upx} .padding-top-sm{padding-top:20upx} .padding-top{padding-top:30upx} .padding-top-lg{padding-top:40upx} .padding-top-xl{padding-top:50upx} .padding-right-xs{padding-right:10upx} .padding-right-sm{padding-right:20upx} .padding-right{padding-right:30upx} .padding-right-lg{padding-right:40upx} .padding-right-xl{padding-right:50upx} .padding-bottom-xs{padding-bottom:10upx} .padding-bottom-sm{padding-bottom:20upx} .padding-bottom{padding-bottom:30upx} .padding-bottom-lg{padding-bottom:40upx} .padding-bottom-xl{padding-bottom:50upx} .padding-left-xs{padding-left:10upx} .padding-left-sm{padding-left:20upx} .padding-left{padding-left:30upx} .padding-left-lg{padding-left:40upx} .padding-left-xl{padding-left:50upx} .padding-lr-xs{padding-left:10upx;padding-right:10upx} .padding-lr-sm{padding-left:20upx;padding-right:20upx} .padding-lr{padding-left:30upx;padding-right:30upx} .padding-lr-lg{padding-left:40upx;padding-right:40upx} .padding-lr-xl{padding-left:50upx;padding-right:50upx} .padding-tb-xs{padding-top:10upx;padding-bottom:10upx} .padding-tb-sm{padding-top:20upx;padding-bottom:20upx} .padding-tb{padding-top:30upx;padding-bottom:30upx} .padding-tb-lg{padding-top:40upx;padding-bottom:40upx} .padding-tb-xl{padding-top:50upx;padding-bottom:50upx}

輔助樣式

實線

.solid,.solid-top,.solid-right,.solid-bottom,.solid-left

虛線

。dashed

陰影

翹邊陰影：shadow-warp
長陰影： shadow-blur

布局

flex

.flex{display:flex}/* 對齊 */ .justify-start{justify-content:flex-start} .justify-end{justify-content:flex-end} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-around{justify-content:space-around} .align-start{align-items:flex-start} .align-end{align-items:flex-end} .align-center{align-items:center} .align-stretch{align-items:stretch}/* 其他 */ .flex-direction{flex-direction:column} .flex-wrap{flex-wrap:wrap}/* 固定尺寸 */ .basis-xs{flex-basis:20%} .basis-sm{flex-basis:40%} .basis-df{flex-basis:50%} .basis-lg{flex-basis:60%} .basis-xl{flex-basis:80%}/* 比例分布*/ .flex-sub{flex:1} .flex-twice{flex:2} .flex-treble{flex:3}/* 自對齊 */ .self-start{align-self:flex-start} .self-center{align-self:flex-center} .self-end{align-self:flex-end} .self-stretch{align-self:stretch} .align-stretch{align-items:stretch}

grid

col-1col-2col-3col-4col-5

1等分列	2等分列	3等分列	4等分列	5等分列

<view class="grid col-2"><view>等分</view><view></view> </view><view class="grid col-2 grid-square"><view>等高</view><view></view> </view>

列表

sm-bordercard-menuarrow

短邊框	卡片	箭頭

<view class="cu-list menu"><view class="cu-item"><view class="content"><text class="cuIcon-circlefill text-grey"></text><text class="text-grey">圖標 + 標題</text></view></view><view class="cu-item"><view class="content"><image src="/static/logo.png" class="png" mode="aspectFit"></image><text class="text-grey">圖片 + 標題</text></view></view><view class="cu-item"><button class="cu-btn content" open-type="contact"><text class="cuIcon-btn text-olive"></text><text class="text-grey">Open-type 按鈕</text></button></view><view class="cu-item"><navigator class="content" hover-class="none" url="../list/list" open-type="redirect"><text class="cuIcon-discoverfill text-orange"></text><text class="text-grey">Navigator 跳轉</text></navigator></view><view class="cu-item"><view class="content"><text class="cuIcon-warn text-green"></text><text class="text-grey">文本</text></view><view class="action"><text class="text-grey text-sm">小目標還沒有實現！</text></view></view> </view>

總結

以上是生活随笔為你收集整理的ColorUI 使用文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。