標簽 · colorUI文檔

![](https://img.kancloud.cn/a7/4a/a74ae6e512d1c765eb32d81da6f678f6_626x224.png) ``` <view> <cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">標簽</block></cu-custom> <view class="cu-bar bg-white solid-bottom"> <view class='action'> <text class='cuIcon-title text-blue'></text>標簽形狀 </view> </view> <view class="padding bg-white solid-bottom"> <view class='cu-tag'>默認</view> <view class='cu-tag round'>橢圓</view> <view class='cu-tag radius'>圓角</view> </view> ``` ![](https://img.kancloud.cn/05/0a/050a421772a8cf6fdcadc3f695e50d58_645x202.png) ``` <view class="cu-bar bg-white margin-top"> <view class='action'> <text class='cuIcon-title text-blue'></text>標簽尺寸 </view> </view> <view class="padding bg-white"> <view class='cu-tag radius sm'>小尺寸</view> <view class='cu-tag radius'>普通尺寸</view> </view> ``` ![](https://img.kancloud.cn/f7/0c/f70c559f18c1cec0b8d8151e1f9489d9_643x368.png) ``` <view class="cu-bar bg-white margin-top"> <view class='action'> <text class='cuIcon-title text-blue'></text>標簽顏色 </view> </view> <view class='padding-sm flex flex-wrap'> <view class="padding-xs" > <view class='cu-tag bg-red'>嫣紅</view> <view class='cu-tag bg-orange'>桔橙</view> <view class='cu-tag bg-yellow'>明黃</view> <view class='cu-tag bg-olive'>橄欖</view> <view class='cu-tag bg-green'>森綠</view> <view class='cu-tag bg-cyan'>天青</view> <view class='cu-tag bg-blue'>海藍</view> <view class='cu-tag bg-purple'>姹紫</view> <view class='cu-tag bg-mauve'>木槿</view> <view class='cu-tag bg-pink'>桃粉</view> <view class='cu-tag bg-brown'>棕褐</view> <view class='cu-tag bg-grey'>玄灰</view> <view class='cu-tag bg-gray'>草灰</view> <view class='cu-tag bg-black'>墨黑</view> <view class='cu-tag bg-white'>雅白</view> </view> <view class="padding-xs"> <view class='cu-tag light bg-red' >嫣紅</view> <view class='cu-tag light bg-orange '>桔橙</view> <view class='cu-tag light bg-yellow'>明黃</view> <view class='cu-tag light bg-olive'>橄欖</view> <view class='cu-tag light bg-green'>森綠</view> <view class='cu-tag light bg-cyan'>天青</view> <view class='cu-tag light bg-blue'>海藍</view> <view class='cu-tag light bg-purple'>姹紫</view> <view class='cu-tag light bg-mauve'>木槿</view> <view class='cu-tag light bg-pink'>桃粉</view> <view class='cu-tag light bg-brown'>棕褐</view> <view class='cu-tag light bg-grey'>玄灰</view> </view> </view> ``` ![](https://img.kancloud.cn/cc/ac/ccacc99f6322b3d1ba442fc37148ad94_643x258.png) ``` <view class="cu-bar bg-white margin-top"> <view class='action'> <text class='cuIcon-title text-blue'></text>鏤空標簽 </view> </view> <view class='padding-sm flex flex-wrap'> <view class="padding-xs" > <view class='cu-tag line-red'>嫣紅</view> <view class='cu-tag line-orange'>桔橙</view> <view class='cu-tag line-yellow'>明黃</view> <view class='cu-tag line-olive'>橄欖</view> <view class='cu-tag line-green'>森綠</view> <view class='cu-tag line-cyan'>天青</view> <view class='cu-tag line-blue'>海藍</view> <view class='cu-tag line-purple'>姹紫</view> <view class='cu-tag line-mauve'>木槿</view> <view class='cu-tag line-pink'>桃粉</view> <view class='cu-tag line-brown'>棕褐</view> <view class='cu-tag line-grey'>玄灰</view> <view class='cu-tag line-gray'>草灰</view> <view class='cu-tag line-black'>墨黑</view> <view class='cu-tag line-white'>雅白</view> </view> </view> ``` ![](https://img.kancloud.cn/db/b8/dbb84ab9e95b9253feb9bfe83a605783_646x207.png) ``` <view class="cu-bar bg-white margin-top"> <view class='action'> <text class='cuIcon-title text-blue'></text>膠囊樣式 </view> </view> <view class="padding"> <view class="cu-capsule"> <view class='cu-tag bg-red'> <text class='cuIcon-likefill'></text> </view> <view class="cu-tag line-red"> 12 </view> </view> <view class="cu-capsule round"> <view class='cu-tag bg-blue '> <text class='cuIcon-likefill'></text> </view> <view class="cu-tag line-blue"> 23 </view> </view> <view class="cu-capsule round"> <view class='cu-tag bg-blue '> 說明 </view> <view class="cu-tag line-blue"> 123 </view> </view> <view class="cu-capsule radius"> <view class='cu-tag bg-grey '> <text class='cuIcon-likefill'></text> </view> <view class="cu-tag line-grey"> 23 </view> </view> <view class="cu-capsule radius"> <view class='cu-tag bg-brown sm'> <text class='cuIcon-likefill'></text> </view> <view class="cu-tag line-brown sm"> 23 </view> </view> </view> ``` ![](https://img.kancloud.cn/17/8c/178c2a34929b5cdbdcbfa24478cddfe1_644x244.png) ``` <view class="cu-bar bg-white margin-top"> <view class='action'> <text class='cuIcon-title text-blue'></text>數字標簽 </view> </view> <view class="padding flex justify-between align-center"> <view class='cu-avatar xl radius'> 港 <view class="cu-tag badge">99+</view> </view> <view class='cu-avatar xl radius' style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg)"> <view class='cu-tag badge'>9</view> </view> <view class='cu-avatar xl radius'> <view class='cu-tag badge'>99</view> <text class='cuIcon-people'></text> </view> <view class='cu-avatar xl radius'> <view class='cu-tag badge'>99+</view> </view> </view> ```