使用import { Tag } from 'antd'; |
文档贡献者
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| closeIcon | 自定义关闭按钮。5.7.0：设置为 null 或 false 时隐藏关闭按钮 | ReactNode | false | 4.4.0 |
| color | 标签色 | string | variant="solid" 时为 default | solid 默认颜色: 6.4.0 |
| disabled | 是否禁用标签 | boolean | false | 6.0.0 |
| href | 点击跳转的地址，指定此属性tag组件会渲染成 <a> 标签 | string | - | 6.0.0 |
| icon | 设置图标 | ReactNode | - | |
| onClose | 关闭时的回调（可通过 e.preventDefault() 来阻止默认行为） | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | 6.0.0 |
| variant | 标签变体 | 'filled' | 'solid' | 'outlined' | 'filled' | 6.0.0 |
是否带边框，请使用 variant="filled" 替代 | boolean | true | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| checked | 设置标签的选中状态 | boolean | false | |
| icon | 设置图标 | ReactNode | - | 5.27.0 |
| onChange | 点击标签时触发的回调 | (checked) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| defaultValue | 初始选中值 | string | number | Array<string | number> | null | - | |
| disabled | 禁用选中 | boolean | - | |
| multiple | 多选模式 | boolean | - | |
| options | 选项列表。对象类型的选项支持为每一项单独设置 className 和 style | Array<{ className?: string; label: ReactNode; style?: CSSProperties; value: string | number } | string | number> | - | className 和 style: 6.4.0 |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| value | 选中值 | string | number | Array<string | number> | null | - | |
| onChange | 点击标签时触发的回调 | (value: string | number | Array<string | number> | null) => void | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| defaultBg | 默认背景色 | string | #f5f5f5 |
| defaultColor | 默认文字颜色 | string | rgba(0,0,0,0.88) |
| solidTextColor | 默认实心标签的文本色 | string | #fff |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainerDisabled | 控制容器在禁用状态下的背景色。 | string | rgba(0,0,0,0.04) |
| colorBgSolid | 实心的背景颜色，目前只用在默认实心按钮背景色上。 | string | rgb(0,0,0) |
| colorBorder | 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。 | string | #d9d9d9 |
| colorBorderDisabled | 控制元素在禁用状态下的边框颜色。 | string | #d9d9d9 |
| colorFillSecondary | 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 | string | rgba(0,0,0,0.06) |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryActive | 主色梯度下的深色激活态。 | string | #0958d9 |
| colorPrimaryHover | 主色梯度下的悬浮态。 | string | #4096ff |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| colorTextHeading | 控制标题字体颜色。 | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeIcon | 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。 | number | 12 |
| fontSizeSM | 小号字体大小 | number | 12 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineHeightSM | 小型文本行高 | number | 1.6666666666666667 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |