Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

import { Tag } from "@taroify/core"

代码演示

基础用法

通过 color 属性控制标签颜色。

<Tag>标签</Tag>
<Tag color="primary">标签</Tag>
<Tag color="info">标签</Tag>
<Tag color="success">标签</Tag>
<Tag color="warning">标签</Tag>
<Tag color="danger">标签</Tag>

空心样式

设置 variant="outlined" 属性设置为空心样式。

<Tag color="primary" variant="outlined">
  标签
</Tag>

圆角样式

通过 shape="rounded" 设置为圆角样式。

<Tag color="primary" shape="rounded">
  标签
</Tag>

右侧圆角样式

通过 shape="roundedRight" 设置为圆角样式。

<Tag color="primary" shape="roundedRight">
  标签
</Tag>

左侧圆角样式

通过 shape="roundedLeft" 设置为圆角样式。

<Tag color="primary" shape="roundedLeft">
  标签
</Tag>

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 onClose 事件，在 onClose 事件中可以执行隐藏标签的逻辑。

function CloseTag() {
  const [visible, setVisible] = useState(true)
  return (
    <>
      {visible && (
        <Tag color="primary" size="medium" closeable onClose={() => setVisible(false)}>
          标签
        </Tag>
      )}
    </>
  )
}

标签大小

通过 size 属性调整标签大小。

<Tag color="primary" children="标签" />
<Tag color="primary" size="medium" children="标签" />
<Tag color="primary" size="large" children="标签" />

自定义颜色

通过 color 和 textColor 属性设置标签颜色。

<Tag style={{ backgroundColor: "#7232dd" }} children="标签" />
<Tag style={{ backgroundColor: "#ffe1e1", color: "#ad0000" }} children="标签" />
<Tag style={{ color: "#7232dd" }} variant="outlined" children="标签" />

API

Props

参数	说明	类型	默认值
size	大小，可选值为 `large` `medium`	string	-
color	类型，可选值为 `primary` `info` `success` `danger` `warning`	string	`default`
shape	形状，可选值为 `rounded` `roundedRight` `roundedLeft`	string	`square`
closeable	是否为可关闭标签	boolean	`false`

Events

事件名	说明	回调参数
onClick	点击时触发	event: ITouchEvent
onClose	关闭标签时触发	event: ITouchEvent

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--tag-padding	var(0 var(--padding-base))	-
--tag-color	var(--white)	-
--tag-font-size	var(--font-size-sm)	-
--tag-border-radius	2px $hd*	-
--tag-line-height	16px $hd*	-
--tag-medium-padding	2px $hd 6px * $hd*	-
--tag-large-padding	var(--padding-base) var(--padding-xs)	-
--tag-large-border-radius	var(--border-radius-md)	-
--tag-large-font-size	var(--font-size-md)	-
--tag-rounded-border-radius	var(--border-radius-max)	-
--tag-rounded-right-padding	var(--tag-rounded-right-padding, 0 (6px $hd) 0 var(--padding-base)*	-
--tag-rounded-left-padding	var(--tag-rounded-left-padding, 0 var(--padding-base) 0 (6px $hd))*	-
--tag-rounded-right-medium-padding	2px $hd 8px * $hd 2px * $hd 6px * $hd*	-
--tag-rounded-left-medium-padding	2px $hd 6px * $hd 2px * $hd 8px * $hd*	-
--tag-rounded-right-large-padding	var(--padding-base) 6px $hd var(--padding-base) var(--padding-xs)*	-
--tag-rounded-left-large-padding	var(--padding-base) var(--padding-xs) var(--padding-base) 6px $hd*	-
--tag-default-color	var(--gray-6)	-
--tag-default-background-color	var(--gray-6)	-
--tag-primary-color	var(--primary-color)	-
--tag-primary-background-color	var(--primary-color)	-
--tag-info-color	var(--info-color)	-
--tag-info-background-color	var(--info-color)	-
--tag-success-color	var(--success-color)	-
--tag-success-background-color	var(--success-color)	-
--tag-warning-color	var(--warning-color)	-
--tag-warning-background-color	var(--warning-color)	-
--tag-danger-color	var(--danger-color)	-
--tag-danger-background-color	var(--danger-color)	-
--tag-outlined-background-color	var(--white)	-
--tag-border-color	var(--tag-border-color, currentColor)	-

#Tag 标签

#介绍

#引入

#代码演示

#基础用法

#空心样式

#圆角样式

#右侧圆角样式

#左侧圆角样式

#可关闭标签

#标签大小

#自定义颜色

#API

#Props

#Events

#主题定制

#样式变量