Importimport { Tag } from "antd"; |
Docs |
contributors
It can be used to tag by dimension or property.
When categorizing.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Custom semantic structure class names | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to null or false | ReactNode | false | 4.4.0 |
| color | Color of the Tag | string | - | |
| disabled | Whether the tag is disabled | boolean | false | 6.0.0 |
| href | The address to jump when clicking, when this property is specified, the tag component will be rendered as an <a> tag | string | - | 6.0.0 |
| icon | Set the icon of tag | ReactNode | - | |
| onClose | Callback executed when tag is closed (can be prevented by e.preventDefault()) | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| styles | Custom semantic structure styles | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| target | Same as target attribute of a, works when href is specified | string | - | 6.0.0 |
| variant | Variant of the tag | 'filled' | 'solid' | 'outlined' | 'filled' | 6.0.0 |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| target | The target attribute of the a tag, which takes effect when href is specified | string | - | 6.0.0 |
| onClose | Callback executed when tag is closed | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| checked | Checked status of Tag | boolean | false | |
| icon | Set the icon of tag | ReactNode | - | 5.27.0 |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | |
| defaultValue | Initial value | string | number | Array<string | number> | null | - | |
| disabled | Disable check/uncheck | boolean | - | |
| multiple | Multiple select mode | boolean | - | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| value | Value of checked tag(s) | string | number | Array<string | number> | null | - | |
| options | Option list | Array<{ label: ReactNode; value: string | number } | string | number> | - | |
| onChange | Callback when Tag is checked/unchecked | (value: string | number | Array<string | number> | null) => void | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| defaultBg | Default background color | string | #fafafa |
| defaultColor | Default text color | string | rgba(0,0,0,0.88) |
| solidTextColor | Default text color for solid tag. | string | #fff |