标签
标签通常用于对内容进行标记。
使用方法
使用 .label
类来获得标签的外观和交互体验,通常用在元素 <span>
上。
标签
外观类型
配合丰富的CSS 工具类来实现不同标签的外观。
主要标签黑色标签描边浅色
尺寸
除了默认大小,标签还提供了额外的 2 种预设尺寸。
小标签普通大小大标签
圆角
通过工具类 rounded-*
来应用不同的圆角样式。
无圆角小圆角普通圆角中等圆角大圆角超大圆角完整圆角
圆点标签
当与工具类 label-dot
一起使用时则获得圆点标签。
与按钮组合使用
CSS 类
标签提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
label | 实体类 | 元素作为标签组件 |
label-dot | 工具类 | 标签使用圆形外观 |
size-sm | 工具类 | 标签使用小号尺寸 |
size-lg | 工具类 | 标签使用大号尺寸 |
CSS 变量
变量名称 | 变量含义 |
---|---|
--label-bg | 标签背景色 |
--label-color | 标签文字颜色 |
--label-border-color | 标签边框颜色 |
--label-radius | 标签圆角 |