Tag タグ

軽量なタグ。type のセマンティック色 + round/hit の形状 + クローズ可能。

タグ

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>デフォルト</LhTag>
      <LhTag type="primary">メイン</LhTag>
      <LhTag type="success">成功</LhTag>
      <LhTag type="warning">警告</LhTag>
      <LhTag type="danger">危険</LhTag>
      <LhTag type="info">情報</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">小</LhTag>
      <LhTag size="medium">デフォルトサイズ</LhTag>
      <LhTag size="large">大</LhTag>
      <LhTag type="primary" round>角丸</LhTag>
      <LhTag type="primary" hit>枠線（hit）</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">クローズ可能</LhTag>
      <LhTag v-if="!closed" type="info" round>クローズ後に非表示</LhTag>
      <LhTag type="warning" disabled>無効</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
type	セマンティック色	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	サイズ	'small' \| 'medium' \| 'large'	'medium'
closable	クローズボタンを表示（aria-label は言語パッケージから）	boolean	false
disabled	無効（クローズボタンの操作を抑制）	boolean	false
round / hit	角丸 / 枠線による強調	boolean	false
onClose	クローズ時のコールバック（close イベントと併存）	(e: Event) => void	—
sx	sx によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
click	クリック時に発火	(e: MouseEvent)
close	クローズボタンクリック時に発火（onClose prop と併存）	(e: Event)