Badge バッジ

アイコンやボタンの隅に付く数値または状態のマーカーです。タイプによる配色、max による切り詰め、ドット、ゼロ値の表示切り替え、位置のオフセットをサポートします。

バッジ

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>未読メッセージ</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>max を超えると切り詰め</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>ドットモード</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>ゼロ値はデフォルトで非表示</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>small サイズ</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset で位置を微調整 / hidden で非表示 / content でカスタムテキスト</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="熱" type="danger" :offset="[6, 4]">
        <LhButton>offset オフセット</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>hidden の切り替え</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? 'バッジを表示' : 'バッジを非表示' }}</LhButton>
    </div>
  </div>
</template>

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

Props

プロパティ	説明	型	デフォルト値
type	タイプによる配色	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	バッジの数値（max を超えると max+ に切り詰め）	string \| number	—
size	サイズ	'small' \| 'default' \| 'large'	'default'
max	数値の上限	number	—
isDot	ドットモード（value を無視）	boolean	false
hidden	バッジを非表示	boolean	false
offset	デフォルト位置からの相対オフセット [x, y]	[number, number]	—
showZero	value が 0 のときにも表示するかどうか	boolean	false
content	カスタムテキスト（value を上書き）	string	—
sx	sx によるレイアウト省略記法	—	—

Slots

デフォルトスロット：バッジがマウントされるホスト要素です。