标签 Tag
用于标记和选择。
使用
API用法示例
类型
<ti-tag variant="contained">面性 = 实心标签</ti-tag>
<ti-tag variant="filled">面性次要 = 辅助色实心标签</ti-tag>
<ti-tag variant="outlined">线性 = 描边标签</ti-tag>
尺寸
<ti-tag size="small">小尺寸</ti-tag>
<ti-tag size="medium">中尺寸</ti-tag>
<ti-tag size="big">大尺寸</ti-tag>
图标 icon
<ti-tag left-icon="home" right-icon="arrow-right">左右图标</ti-tag>
优惠券模式
<ti-tag shape="coupon" variant="contained">面性 = 实心标签</ti-tag>
<ti-tag shape="coupon" variant="filled">面性次要 = 辅助色实心标签</ti-tag>
<ti-tag shape="coupon" variant="outlined">线性 = 描边标签</ti-tag>
ti-tag API
属性 Properties
| 名称 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| variant | string | 否 | contained | 类型，可选值contained filled outlined | - |
| size | string | 否 | medium | 大小，可选值small medium big | - |
| shape | string | 否 | round | 形状，可选值normal | coupon | - |
| left-icon | string | 否 | '' | 左侧图标名称 | - |
| right-icon | string | 否 | '' | 右侧图标名称 | - |
| ext-style | string | 否 | - | 根节点样式 | - |
插槽 Slots
| 名称 | 说明 | 备注 |
|---|---|---|
| default | 默认插槽 | - |
| prefix | 前缀 | - |
| suffix | 后缀 | - |
外部样式类 External Classes
| 名称 | 说明 | 备注 |
|---|---|---|
| ext-class | 根节点样式类 | - |
CSS 变量 CSS Variables
| 变量 | 默认值 | 说明 | 备注 |
|---|---|---|---|
--tag-background-color | theme.color.brand.1000 | 背景色 | - |
--tag-border-width | 1px | 边宽度 | - |
--tag-border-style | solid | 边风格 | - |
--tag-border-color | theme.color.brand.1000 | 边颜色 | - |
--tag-font-size | theme.fontSize.t3 | 文字字号（size = 中号 medium/大号 big） | - |
theme.fontSize.t2 | 文字字号（size = 小号 small） | - | |
--tag-line-height | theme.lineHeight.single.t2 | 文字行高（size = 中号 medium） | - |
theme.lineHeight.single.t1 | 文字行高（size = 小号 small） | - | |
theme.lineHeight.single.t4 | 文字行高（size = 大号 big） | - | |
--tag-font-weight | theme.fontWeight.regular | 文字字重 | - |
--tag-text-color | theme.color.gray.texticon.invert | 文字颜色（variant = 面性 / contained） | - |
theme.color.brand.1000 | 文字颜色（variant = 面性次要 filled / 线性 outlined） | - | |
--tag-icon-font-size | theme.fontSize.t2 | 文字左右图标尺寸 | - |
theme.fontSize.t4 | 文字左右图标尺寸（size = 大号 big） | - | |
--tag-text-icon-gap | theme.spacing.gap.g1 | 文字和图标间距 | - |
--tag-padding-v | theme.spacing.vertical.v1 | 上下内边距 | - |
--tag-padding-h | theme.spacing.horizontal.h2 | 上下内边距 | - |
--tag-padding | var(--tag-padding-v) var(--tag-padding-h) | 内边距 | - |
--tag-radius | theme.borderRadius.r1 | 圆角 | - |