Empty 空の状態

データが空のときのプレースホルダー表示です。コンテナは role="status" で、空状態が出現するとスクリーンリーダーが自動的に読み上げます。

基本的な使い方

基本的な使い方

データがありません

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

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

カスタム説明

カスタム説明

検索結果は空です

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

<template>
  <LhEmpty description="検索結果は空です" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="検索結果は空です" />
</template>

カスタム画像

カスタム画像

注文はまだありません

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

<template>
  <LhEmpty image="/logo.svg" description="注文はまだありません" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="注文はまだありません" />
</template>

操作付き

操作付き

まだ何もお気に入り登録していません

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

<template>
  <LhEmpty description="まだ何もお気に入り登録していません">
    <template #actions>
      <LhButton type="primary" size="small">見にいく</LhButton>
      <LhButton size="small">更新</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="まだ何もお気に入り登録していません">
    <template #actions>
      <LhButton type="primary" size="small">見にいく</LhButton>
      <LhButton size="small">更新</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API

Props

プロパティ	説明	型	デフォルト値
description	説明テキスト（未指定時は言語パック empty.description）	string	—
image	カスタム画像 URL（デフォルトのインラインイラストを差し替え）	string	—
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Slots

スロット	説明	デフォルト内容
default	カスタム視覚領域（イラストを差し替え）	デフォルトの水墨イラスト
description	カスタム説明	言語パック empty.description
actions	操作領域	—

アクセシビリティ

• コンテナは role="status"：空状態が出現すると自動的に読み上げられます
• 装飾的な画像は alt="" でスクリーンリーダーから隠され、セマンティクスは説明テキストが担います

型定義

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

LhEmptyProps

export interface LhEmptyProps {
  /** 空状態の説明テキスト（未指定時は言語パック empty.description） */
  description?: string
  /** カスタム画像 URL（デフォルトのインラインイラストを差し替え） */
  image?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}