Tag タグ

LhTag は識別と分類に使用します。

基本的な使い方

タグ 1タグ 2タグ 3

vue

<script setup lang="ts">
import { LhTag } from '@lh-ui/vue3'
</script>

<template>
  <LhTag>タグ 1</LhTag>
  <LhTag>タグ 2</LhTag>
  <LhTag>タグ 3</LhTag>
</template>

vue

<script>
import { LhTag } from '@lh-ui/vue3'

export default {
  components: { LhTag }
}
</script>

<template>
  <LhTag>タグ 1</LhTag>
  <LhTag>タグ 2</LhTag>
  <LhTag>タグ 3</LhTag>
</template>

タイプ

メインタグ成功タグ警告タグ危険タグ情報タグ

vue

<script setup lang="ts">
</script>

<template>
  <LhTag type="primary">メインタグ</LhTag>
  <LhTag type="success">成功タグ</LhTag>
  <LhTag type="warning">警告タグ</LhTag>
  <LhTag type="danger">危険タグ</LhTag>
  <LhTag type="info">情報タグ</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag type="primary">メインタグ</LhTag>
  <LhTag type="success">成功タグ</LhTag>
  <LhTag type="warning">警告タグ</LhTag>
  <LhTag type="danger">危険タグ</LhTag>
  <LhTag type="info">情報タグ</LhTag>
</template>

サイズ

小タグ中タグ大タグ

vue

<script setup lang="ts">
</script>

<template>
  <LhTag size="small">小タグ</LhTag>
  <LhTag size="medium">中タグ</LhTag>
  <LhTag size="large">大タグ</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag size="small">小タグ</LhTag>
  <LhTag size="medium">中タグ</LhTag>
  <LhTag size="large">大タグ</LhTag>
</template>

クローズ可能

タグ 1タグ 2無効タグ

vue

<script setup lang="ts">
import { ref } from 'vue'

const show1 = ref(true)
const show2 = ref(true)
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">タグ 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">タグ 2</LhTag>
  <LhTag disabled>無効タグ</LhTag>
</template>

vue

<script>
export default {
  data() {
    return {
      show1: true,
      show2: true,
    }
  },
}
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">タグ 1</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">タグ 2</LhTag>
</template>

角丸とマーク

角丸タグマークタグ角丸マーク

vue

<script setup lang="ts">
</script>

<template>
  <LhTag round>角丸タグ</LhTag>
  <LhTag hit>マークタグ</LhTag>
  <LhTag round hit>角丸マーク</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag round>角丸タグ</LhTag>
  <LhTag hit>マークタグ</LhTag>
  <LhTag round hit>角丸マーク</LhTag>
</template>

カスタムテーマ

タグにカスタムカラーテーマを適用します。

松花绿タグ成功

vue

<script setup lang="ts">
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

const songhuaTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#7BB079',
  'primary-color-bg': '#E8F5E8',
}
</script>

<template>
  <!-- 部分テーマ：松花绿 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">松花绿タグ</LhTag>
    <LhTag type="success">成功</LhTag>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag },
  data() {
    return {
      songhuaTheme: {
        'primary-color': '#5B8C5A',
        'primary-color-hover': '#7BB079',
        'primary-color-bg': '#E8F5E8',
      },
    }
  },
}
</script>

<template>
  <!-- 部分テーマ：松花绿 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">松花绿タグ</LhTag>
    <LhTag type="success">成功</LhTag>
  </LhConfigProvider>
</template>

その他のテーマについてはテーマのカスタマイズを参照してください。

国際化

タグのテキストは、LhConfigProvider と言語パックを組み合わせて国際化切り替えができます。

标签

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Tag API

Props

プロパティ名	説明	型	デフォルト値
type	タグのタイプ	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'default'`
size	サイズ	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
closable	クローズ可能か	`boolean`	`false`
disabled	無効化するか	`boolean`	`false`
round	角丸にするか	`boolean`	`false`
hit	ボーダー枠線を付けるか	`boolean`	`false`
onClose	クローズ時のカスタム処理	`(e: Event) => void`	—
sx	クイックレイアウトプロパティ（`{ mt: 2, w: '50%' }` など）。インラインスタイルに変換されてルート要素に適用される	`LhSxProps`	—

Events

イベント名	説明	型
click	タグをクリックしたときに発火	`(e: MouseEvent) => void`
close	タグを閉じたときに発火	`(e: Event) => void`

Slots

スロット名	説明
default	タグのコンテンツ

アクセシビリティ

閉じるボタンはアイコンのみのボタンで、aria-label は言語パックの tag.close（日本語では「閉じる」）を参照する。ConfigProvider の言語切り替えに追従する
閉じるボタン内の <svg> アイコンは aria-hidden とし、スクリーンリーダーの重複読み上げを避ける
タグのテキスト自体はそのまま読み上げ可能で、追加の命名は不要

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/tag/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhTagProps

export interface LhTagProps {
  type?: LhTagType
  size?: LhTagSize
  closable?: boolean
  disabled?: boolean
  round?: boolean
  hit?: boolean
  /** クローズ時のカスタム処理 */
  onClose?: (e: Event) => void
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhTagSize

export type LhTagSize = LhComponentSize

LhTagType _{（@lh-ui/share/core/tag から）}

export type LhTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'

LhComponentSize _{（@lh-ui/share/core/shared から）}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Tag タグ ​

基本的な使い方 ​

タイプ ​

サイズ ​

クローズ可能 ​

角丸とマーク ​

カスタムテーマ ​

国際化 ​

Tag API ​

Props ​

Events ​

Slots ​

アクセシビリティ ​

型定義 ​