Tag 标签

用于标记和选择。

基础用法

由 type 属性来选择 tag 的类型。也可以通过 color 属性来自定义背景色。

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagBasic() {  return (    <div style={row}>      <ElTag type="primary">Tag 1</ElTag>      <ElTag type="success">Tag 2</ElTag>      <ElTag type="info">Tag 3</ElTag>      <ElTag type="warning">Tag 4</ElTag>      <ElTag type="danger">Tag 5</ElTag>    </div>  );}

可移除标签

设置 closable 属性可以定义一个标签是否可移除。它接受一个 Boolean。默认的标签移除时会附带渐变动画。如果不想使用，可以设置 disable-transitions 属性，它接受一个 Boolean，true 为关闭。当 Tag 被移除时会触发 close 事件。

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagClosable() {  return (    <div style={row}>      <ElTag type="primary" closable>Tag 1</ElTag>      <ElTag type="success" closable>Tag 2</ElTag>      <ElTag type="info" closable>Tag 3</ElTag>      <ElTag type="warning" closable>Tag 4</ElTag>      <ElTag type="danger" closable>Tag 5</ElTag>    </div>  );}

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。

Tag 1Tag 2Tag 3

export function TagClosableDynamic() {  const [tags, setTags] = useState(["Tag 1", "Tag 2", "Tag 3"]);  const [inputVisible, setInputVisible] = useState(false);  const [inputValue, setInputValue] = useState("");  const inputRef = useRef<InputExpose | null>(null);  useEffect(() => {    if (inputVisible) inputRef.current?.focus();  }, [inputVisible]);  const handleConfirm = () => {    if (inputValue) {      setTags((current) => [...current, inputValue]);    }    setInputVisible(false);    setInputValue("");  };  return (    <div style={row}>      {tags.map((tag) => (        <ElTag          key={tag}          closable          disableTransitions={false}          onClose={() => setTags((current) => current.filter((item) => item !== tag))}        >          {tag}        </ElTag>      ))}      {inputVisible ? (        <ElInput          ref={inputRef}          value={inputValue}          size="small"          style={{ width: "6.25rem" }}          onChange={(value) => setInputValue(value)}          onKeyDown={(event) => {            if (event.key === "Enter") handleConfirm();          }}          onBlur={handleConfirm}        />      ) : (        <ElButton size="small" onClick={() => setInputVisible(true)}>          + New Tag        </ElButton>      )}    </div>  );}

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.

LargeDefaultSmall

主题

Tag 组件提供了三个不同的主题：dark、light 和 plain。

通过设置 effect 属性来改变主题，默认为 light。

DarkTag 1Tag 2Tag 3Tag 4Tag 5

LightTag 1Tag 2Tag 3Tag 4Tag 5

PlainTag 1Tag 2Tag 3Tag 4Tag 5

export function TagEffect() {  return (    <div style={column}>      <div style={row}>        <span>Dark</span>        <ElTag type="primary" effect="dark">Tag 1</ElTag>        <ElTag type="success" effect="dark">Tag 2</ElTag>        <ElTag type="info" effect="dark">Tag 3</ElTag>        <ElTag type="warning" effect="dark">Tag 4</ElTag>        <ElTag type="danger" effect="dark">Tag 5</ElTag>      </div>      <div style={row}>        <span>Light</span>        <ElTag type="primary" effect="light">Tag 1</ElTag>        <ElTag type="success" effect="light">Tag 2</ElTag>        <ElTag type="info" effect="light">Tag 3</ElTag>        <ElTag type="warning" effect="light">Tag 4</ElTag>        <ElTag type="danger" effect="light">Tag 5</ElTag>      </div>      <div style={row}>        <span>Plain</span>        <ElTag type="primary" effect="plain">Tag 1</ElTag>        <ElTag type="success" effect="plain">Tag 2</ElTag>        <ElTag type="info" effect="plain">Tag 3</ElTag>        <ElTag type="warning" effect="plain">Tag 4</ElTag>        <ElTag type="danger" effect="plain">Tag 5</ElTag>      </div>    </div>  );}

圆角标签

Tag 可以像按钮组件一样变为圆角。

Tag 1Tag 2Tag 3Tag 4Tag 5

export function TagRound() {  return (    <div style={column}>      <div style={row}>        <ElTag type="primary" effect="dark" round>Tag 1</ElTag>        <ElTag type="success" effect="dark" round>Tag 2</ElTag>        <ElTag type="info" effect="dark" round>Tag 3</ElTag>        <ElTag type="warning" effect="dark" round>Tag 4</ElTag>        <ElTag type="danger" effect="dark" round>Tag 5</ElTag>      </div>      <div style={row}>        <ElTag type="primary" effect="light" round>Tag 1</ElTag>        <ElTag type="success" effect="light" round>Tag 2</ElTag>        <ElTag type="info" effect="light" round>Tag 3</ElTag>        <ElTag type="warning" effect="light" round>Tag 4</ElTag>        <ElTag type="danger" effect="light" round>Tag 5</ElTag>      </div>      <div style={row}>        <ElTag type="primary" effect="plain" round>Tag 1</ElTag>        <ElTag type="success" effect="plain" round>Tag 2</ElTag>        <ElTag type="info" effect="plain" round>Tag 3</ElTag>        <ElTag type="warning" effect="plain" round>Tag 4</ElTag>        <ElTag type="danger" effect="plain" round>Tag 5</ElTag>      </div>    </div>  );}

可选中的标签

有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。您可以在2.5.4中使用 type 属性。

check-tag 的基础使用方法，check-tag 提供的 API 非常简单。

CheckedToggle meDisabled

Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6

export function TagCheckable() {  const [checked, setChecked] = useState(false);  const [types, setTypes] = useState({    primary: true,    success: true,    info: true,    warning: true,    danger: true,    disabledSuccess: true,  });  return (    <div style={column}>      <div style={row}>        <ElCheckTag checked>Checked</ElCheckTag>        <ElCheckTag checked={checked} onCheckedChange={setChecked}>          Toggle me        </ElCheckTag>        <ElCheckTag disabled>Disabled</ElCheckTag>      </div>      <div style={row}>        {(["primary", "success", "info", "warning", "danger"] as const).map(          (type, index) => (            <ElCheckTag              key={type}              type={type}              checked={types[type]}              onCheckedChange={(next) =>                setTypes((current) => ({ ...current, [type]: next }))              }            >              Tag {index + 1}            </ElCheckTag>          ),        )}        <ElCheckTag          type="success"          disabled          checked={types.disabledSuccess}          onCheckedChange={(next) =>            setTypes((current) => ({ ...current, disabledSuccess: next }))          }        >          Tag 6        </ElCheckTag>      </div>    </div>  );}

Tag API

Tag Attributes

属性名	说明	类型	默认值
type	主题类型	`enum`	primary
closable	是否可关闭	`boolean`	false
disable-transitions	是否禁用关闭动画	`boolean`	false
hit	是否高亮边框	`boolean`	false
color	自定义背景色	`string`	—
size	尺寸	`enum`	—
effect	主题	`enum`	light
round	是否圆角	`boolean`	false
close-label	关闭按钮的无障碍标签	`string`	取 locale 的 el.tag.close

Tag Events

事件名	说明	参数
onClose	关闭时触发	`Function`
onClick	点击时触发	`Function`

Tag Slots

插槽名	说明	React 写法
default	标签内容	`children`