Label
维护者：
goshander
theme
type
size
disabled
interactive
value
copyText
children
import {Label} from '@gravity-ui/uikit';
您可以使用 Labels 来突出显示某些信息。Label 带有 Close 或 Copy 按钮的对各种简单操作可能很有用。
Labels 最适合显示具有不同颜色代码的单行文本信息，以显示其重要性。
外观
A Label 可以以多种样式显示。
主题
使用该 theme 属性为不同的状态应用不同的主题。您可以使用以下值： normal 、、 info success 、 warning 、 danger 、 utility unknown 、和 clear。
默认主题是 normal。
Normal
Info
Success
Warning
Danger
Utility
Unknown
Clear
<Label theme="normal">Normal</Label>
<Label theme="info">Info</Label>
<Label theme="success">Success</Label>
<Label theme="warning">Warning</Label>
<Label theme="danger">Danger</Label>
<Label theme="utility">Utility</Label>
<Label theme="unknown">Unknown</Label>
<Label theme="clear">Clear</Label>类型
该 type 属性向：添加了各种选项 Label：
copy:添加复制按钮；单击时，它会复制该 copyText 属性的值。
close:添加用于管理标签列表的关闭按钮。
Closable
Copy
<Label type="default" onClick={() => alert('On click label')} size="s">Clickable</Label>
<Label type="close" onCloseClick={() => alert('On click close')} size="s">Closable</Label>
<Label type="copy" copyText="Copy" onCopy={() => alert('On copy')} size="s">Copy</Label>图标
您可以使用该 icon 属性添加图标。为此，请使用该 Icon 组件，它是 SVG 的特殊包装器。
Icon
Icon and close
Icon and copy
<Label icon={<Icon size={16} data={GearIcon} />}>Icon</Label>
<Label type="close" icon={<Icon size={16} data={GearIcon} />}>Icon and close</Label>
<Label type="copy" icon={<Icon size={16} data={GearIcon} />}>Icon and copy</Label>价值
可以使用 Labels 来显示键值信息。为此，您需要提供属性的密钥和值，以： children value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
Key
:
Value
<Label theme="normal" value="Value">Key</Label>
<Label theme="info" value="Value">Key</Label>
<Label theme="success" value="Value">Key</Label>
<Label theme="warning" value="Value">Key</Label>
<Label theme="danger" value="Value">Key</Label>
<Label theme="utility" value="Value">Key</Label>
<Label theme="unknown" value="Value">Key</Label>
<Label theme="clear" value="Value">Key</Label>州
A label 可以有不同的状态：
disabled:不允许互动。interactive:使标签可悬停。
Default
Disabled
Interactive
<Label>Default</Label>
<Label disabled>Disabled</Label>
<Label interactive>Interactive</Label>大小
XS size
S size
M size
<Label size="xs">XS size</Label>
<Label size="s">S size</Label>
<Label size="m">M size</Label>属性
| 姓名 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 儿童 | 内容 | React.ReactNode | |
| className | class HTML 属性 | string | |
| closeButtonLabel | aria-label 关闭按钮的 | string | |
| copyButtonLabel | aria-label “复制” 按钮的 | string | |
| copyText | 要复制的文本 | string | |
| 残疾的 | 禁用状态 | boolean | |
| 图标 | 标签图标（在左边） | React.ReactNode | |
| 互动的 | 启用悬停效果 | boolean | |
| onClick | click 事件处理器 | Function | |
| onCloseClick | 关闭按钮 click 事件处理器 | Function | |
| onCopy | copy 事件处理器 | Function | |
| 尺寸 | 标签尺寸 | "xs" "m" | "s" |
| 主题 | 标签主题 | string | "normal" |
| 类型 | 标签类型 | "default" "close" | "default" |
| 价值 | 标签值（显示为 "children : value"） | string | |
| 标题 | title HTML 属性 | string | |
| qa | data-qa HTML 属性，用于测试 | string |