标签
需要设置成标签的元素加上 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>
上次更新: 2024/05/01, 21:37:52