Taroify

Tag 标签

介绍

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

引入

import { Tag } from "@taroify/core"
// or
import Tag from "@taroify/core/tag"

代码演示

基础用法

通过 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)	-