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'