colorui-doc/docs/10.文档/20.基础元素/60.标签.md

title, date, permalink, article

title	date	permalink	article
标签	2023-05-28 15:20:38	/pages/basics/tag	false

需要设置成标签的元素加上 class 类名 cu-tag 即可

标签形状

css 代码

.cu-tag  默认　　
.cu-tag round  椭圆
.cu-tag radius  圆角

演示代码

<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</view>

标签尺寸

css 代码

.cu-tag sm  小尺寸
.cu-tag  默认

演示代码

<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>

标签颜色

css 代码

.bg-red 背景颜色 | .bg-...

演示代码

<view class="cu-tag bg-red">标签</view>

镂空标签

.bg- 换成 .line-

css 代码

.line-red|...

演示代码

<view class="cu-tag line-red">标签</view>

胶囊样式

父容器加样式 .cu-capsule，里面包裹需要的图标和标签

演示代码 可对比右侧预览

<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>

数字标签

父容器一般为头像 cu-avatar，其中包裹标签，class 为 cu-tag badge，元素内部没有内容，则默认为红色圆点

演示代码 可对比右侧预览

<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>