Badge バッジ

LhBadge は未読メッセージ数やステータスマークを表示するために使用します。

基本的な使い方

⁵

vue

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

<template>
  <LhBadge :value="5">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge :value="5">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

最大値のカスタマイズ

⁹⁹⁺

vue

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

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

ドット

is-dot は小さな赤いドットのみを表示し、具体的な数値は表示しません。「更新あり」タイプのヒントに適しており、type で色を変えられます。

メッセージ

タスク

vue

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

<template>
  <!-- ドット -->
  <LhBadge is-dot>
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- ドット（警告色） -->
  <LhBadge is-dot type="warning">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- ドット -->
  <LhBadge is-dot>
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- ドット（警告色） -->
  <LhBadge is-dot type="warning">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

オフセット・ゼロ値・カスタム内容

offset はバッジの位置を微調整します（[x, y] のピクセルオフセット）。show-zero はゼロ値も表示します。content は数値の代わりにカスタムテキストを表示します。

offset

⁵

show-zero

⁰

content

^新

vue

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

<template>
  <!-- オフセット -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- ゼロ値も表示 -->
  <LhBadge :value="0" show-zero>
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- カスタム内容 -->
  <LhBadge value="新" content="新">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- オフセット -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- ゼロ値も表示 -->
  <LhBadge :value="0" show-zero>
    <div>対象コンテンツ</div>
  </LhBadge>
  <!-- カスタム内容 -->
  <LhBadge value="新" content="新">
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

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

<template>
  <LhBadge is-dot>
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge is-dot>
    <div>対象コンテンツ</div>
  </LhBadge>
</template>

タイプ

vue

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

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

サイズ

⁵

vue

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

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

表示・非表示の制御

¹⁰

vue

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

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>対象コンテンツ</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '表示' : '非表示' }}
  </LhButton>
</template>

vue

<script>
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>対象コンテンツ</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '表示' : '非表示' }}
  </LhButton>
</template>

型定義

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

LhBadgeProps

export interface LhBadgeProps {
  type?: LhBadgeType
  value?: string | number
  size?: LhBadgeSize
  max?: number
  isDot?: boolean
  hidden?: boolean
  offset?: [number, number]
  showZero?: boolean
  content?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhBadgeSize

export type LhBadgeSize = LhComponentSize

LhBadgeOffset

export type LhBadgeOffset = [number, number]

LhBadgeType _{（@lh-ui/share/core/badge より）}

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

LhComponentSize _{（@lh-ui/share/core/shared より）}

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

国際化

バッジのテキストは LhConfigProvider と言語パックを組み合わせることで国際化切り替えを実現できます。

Messages

⁵

vue

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

const locale = ref('ja-JP')
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

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

export default {
  components: { LhConfigProvider, LhBadge, LhButton },
  data() {
    return {
      locale: 'ja-JP',
      jaJP: jaJP,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- ConfigProvider で言語パックを切り替え -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

プロパティ	説明	型	デフォルト値
type	バッジのタイプ	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'danger'`
value	表示値	`string \| number`	—
size	サイズ	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
max	最大値	`number`	`99`
isDot	ドットモード	`boolean`	`false`
hidden	非表示にするかどうか	`boolean`	`false`
offset	オフセット量	`[number, number]`	—
showZero	0 を表示するかどうか	`boolean`	`false`
content	カスタム内容	`string`	—
sx	クイックレイアウトプロパティ（例: `{ mt: 2, w: '50%' }`）。インラインスタイルに変換されてルート要素に適用されます	`LhSxProps`	—

アクセシビリティ

ドットモード（is-dot）のバッジは純粋な装飾です。aria-hidden を付けてアクセシビリティツリーに入れません
数値モードはテキスト内容を保持し、スクリーンリーダーが「99+」などのカウントを読み上げられます

Badge バッジ ​

基本的な使い方 ​

最大値のカスタマイズ ​

ドット ​

オフセット・ゼロ値・カスタム内容 ​

タイプ ​

サイズ ​

表示・非表示の制御 ​

型定義 ​

国際化 ​

API ​

アクセシビリティ ​