Tag
Tag
Used for marking and categorization.
Importimport{ Tag }from"antd"; |
Sourcecomponents/tag |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
It can be used to tag by dimension or property.
When categorizing.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Semantic DOM class | 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 | - | |
| variant | Variant of the tag | 'filled' | 'solid' | 'outlined' | 'filled' | 6.0.0 |
| icon | Set the icon of tag | ReactNode | - | |
| 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 |
| 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 |
|---|---|---|---|
| checked | Checked status of Tag | boolean | false |
| 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 |
Usage of basic Tag, and it could be closable and customize close button by set closeIcon property, will display default close button when closeIcon is setting to true. Closable Tag supports onClose events.
Generating a set of Tags by array, you can add and remove dynamically.
Animating the Tag by using rc-tween-one.
We preset five different colors, you can set color property such as success,processing,error,default and warning to indicate specific status.
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
CheckableTag works like Checkbox, click it to toggle checked state. CheckableTagGroup provides function that is similar to CheckboxGroup or RadioGroup.
CheckableTagis absolute controlled component and has no uncontrolled mode.
Tag components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Tag.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Tag rather than using the icon property.
Draggable tags using dnd kit.
