2016-08-23 09:37:10 +08:00
|
|
|
|
---
|
|
|
|
|
|
category: Components
|
2022-11-09 12:28:04 +08:00
|
|
|
|
group: Data Display
|
2016-09-21 11:28:38 +08:00
|
|
|
|
title: Tag
|
2022-11-30 20:14:41 +08:00
|
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original
|
2023-02-09 22:17:31 +08:00
|
|
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original
|
2022-11-09 12:28:04 +08:00
|
|
|
|
demo:
|
|
|
|
|
|
cols: 2
|
2016-08-23 09:37:10 +08:00
|
|
|
|
---
|
|
|
|
|
|
|
2017-09-18 10:27:35 +08:00
|
|
|
|
Tag for categorizing or markup.
|
2016-08-23 09:37:10 +08:00
|
|
|
|
|
2016-09-10 13:43:30 +08:00
|
|
|
|
## When To Use
|
2016-08-23 09:37:10 +08:00
|
|
|
|
|
|
|
|
|
|
- It can be used to tag by dimension or property.
|
|
|
|
|
|
|
2017-09-18 10:27:35 +08:00
|
|
|
|
- When categorizing.
|
2016-08-23 09:37:10 +08:00
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
|
## Examples
|
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
<!-- prettier-ignore -->
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/basic.tsx">Basic</code>
|
|
|
|
|
|
<code src="./demo/colorful.tsx">Colorful Tag</code>
|
|
|
|
|
|
<code src="./demo/colorful-inverse.tsx" debug>Inverse Colorful Tag</code>
|
|
|
|
|
|
<code src="./demo/control.tsx">Add & Remove Dynamically</code>
|
|
|
|
|
|
<code src="./demo/checkable.tsx">Checkable</code>
|
|
|
|
|
|
<code src="./demo/animation.tsx">Animate</code>
|
|
|
|
|
|
<code src="./demo/icon.tsx">Icon</code>
|
|
|
|
|
|
<code src="./demo/status.tsx">Status Tag</code>
|
2023-03-21 13:02:27 +08:00
|
|
|
|
<code src="./demo/borderless.tsx">borderless</code>
|
|
|
|
|
|
<code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/customize.tsx" debug>Customize close</code>
|
2023-04-04 10:05:04 +08:00
|
|
|
|
<code src="./demo/draggable.tsx">Draggable Tag</code>
|
2023-05-23 09:45:41 +08:00
|
|
|
|
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
2016-08-23 09:37:10 +08:00
|
|
|
|
## API
|
|
|
|
|
|
|
2023-08-08 18:27:48 +08:00
|
|
|
|
Common props ref：[Common props](/docs/react/common-props)
|
|
|
|
|
|
|
2016-11-10 11:14:03 +08:00
|
|
|
|
### Tag
|
|
|
|
|
|
|
2023-06-20 13:42:55 +08:00
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| 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 | - | |
|
|
|
|
|
|
| icon | Set the icon of tag | ReactNode | - | |
|
|
|
|
|
|
| bordered | Whether has border style | boolean | true | 5.4.0 |
|
|
|
|
|
|
| onClose | Callback executed when tag is closed | (e) => void | - | |
|
2016-11-10 11:14:03 +08:00
|
|
|
|
|
|
|
|
|
|
### Tag.CheckableTag
|
|
|
|
|
|
|
2022-08-15 14:39:02 +08:00
|
|
|
|
| Property | Description | Type | Default |
|
|
|
|
|
|
| -------- | ----------------------------------------------- | ----------------- | ------- |
|
|
|
|
|
|
| checked | Checked status of Tag | boolean | false |
|
|
|
|
|
|
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
|
2023-04-11 10:25:24 +08:00
|
|
|
|
|
|
|
|
|
|
## Design Token
|
|
|
|
|
|
|
|
|
|
|
|
<ComponentTokenTable component="Tag"></ComponentTokenTable>
|
