标记

此组件以可选链接和/或可选标签显示 按钮将其删除.

安装

yarn add @chakra-ui/tag

导入组件

import { Tag } from "@chakra-ui/tag"

基本用途

<Tag />

大小

通过 size 改变标签大小的道具 .

<>
  <Tag size="sm" colorScheme="gray">
    Gray
  </Tag>
  <Tag colorScheme="gray">Gray</Tag>
  <Tag size="lg" colorScheme="gray">
    Gray
  </Tag>
</>

颜色

通过 colorScheme 改变标签组件背景颜色的道具

<>
  <Tag colorScheme="pink">Pink</Tag>
</>

带有图标

标签组件可以包含一个图标. 这是通过使用 TagIcon 标记组件中的组件.

<>
  <Tag colorScheme="cyan">
    <TagIcon size="12px" as={AddIcon} />
    <TagLabel>Green</TagLabel>
  </Tag>
</>

关闭按钮

使用 TagCloseButton 对标签组件应用关闭按钮.

<Tag variant="solid" size="sm" colorScheme="cyan">
  <TagLabel>Tab Label</TagLabel>
  <TagCloseButton />
</Tag>

有自定义元素

标记组件可以包含自定义元素. 这是通过放置自定义来实现的 标记组件中的元素.

<Tag size="lg" colorScheme="red" borderRadius="full">
  <Avatar
    src="https://bit.ly/sage-adebayo"
    size="xs"
    name="Segun Adebayo"
    ml={-1}
    mr={2}
  />
  <TagLabel>Segun</TagLabel>
  <TagCloseButton />
</Tag>