Tag 標籤

用於標記和選擇的標籤。

基礎用法

基礎用法

預設標籤主要標籤成功標籤圓角標籤描邊標籤水墨國風元件庫

import { useState } from 'react'
import { LhTag } from '@lh-ui/react'

export default function Demo() {
  const [tags, setTags] = useState(['水墨', '国风', '组件库'])

  const handleClose = (tag: string) => {
    setTags((prev) => prev.filter((item) => item !== tag))
  }

  return (
    <>
      <LhTag>默认标签</LhTag>
      <LhTag type="primary">主要标签</LhTag>
      <LhTag type="success">成功标签</LhTag>
      <LhTag type="warning" round>圆角标签</LhTag>
      <LhTag type="danger" hit>描边标签</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Tag Props

屬性	說明	型別	可選值	預設值
type	類型	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	尺寸	'large' | 'middle' | 'small'	—	跟隨 ConfigProvider
closable	可關閉	boolean	—	false
disabled	停用（不回應點選與關閉）	boolean	—	false
round	圓角	boolean	—	false
hit	描邊形態	boolean	—	false
sx	快速版面配置屬性	SxProps	—	—

Tag 事件

事件	說明	回呼簽名	Vue 對照
onClick	點選時觸發（傳入 onClick 且未 disabled 時，元件升級為 role="button"）	(event: MouseEvent) => void	@click
onClose	關閉按鈕點選	(event: MouseEvent) => void	@close

鍵盤互動

可點選的 Tag 渲染為 role="button" 並回應 Enter / Space，詳見無障礙。

關閉即卸載（React 增強）

點選關閉按鈕後 Tag 立即從 DOM 卸載，隨後才拋 onClose。lh-ui-plus 的 @close 只拋事件、由外部 v-if 移除節點；React 無指令，純展示場景若還要外部 state 控制卸載 用法太重，故本庫內建關閉態。若需完全自行控制顯隱，用條件渲染包裹即可。

樣式

import '@lh-ui/react/style/tag'