Skeleton スケルトン

コンテンツの読み込みが完了するまでのプレースホルダーを提供します。プレースホルダーブロックは aria-hidden でスクリーンリーダーから隠され、コンテナは aria-busy と aria-live で読み込み状態の変化を通知します。シャimmer アニメーションは prefers-reduced-motion を尊重します。

基本的な使い方

基本的な使い方

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

const skeletonLoading = ref(true)
</script>

<template>
  <!-- 基本的な使い方 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>コンテンツの読み込み完了：群れの鳥は高く飛び去り、一つの雲が独り去っていく。</p>
  </LhSkeleton>
  <!-- 読み込み状態の切替え -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'コンテンツを表示' : 'スケルトンを表示' }}
  </LhButton>
</template>

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

<template>
  <!-- 基本的な使い方 -->
  <LhSkeleton :rows="3" :loading="skeletonLoading">
    <p>コンテンツの読み込み完了：群れの鳥は高く飛び去り、一つの雲が独り去っていく。</p>
  </LhSkeleton>
  <!-- 読み込み状態の切替え -->
  <LhButton size="small" @click="skeletonLoading = !skeletonLoading">
    {{ skeletonLoading ? 'コンテンツを表示' : 'スケルトンを表示' }}
  </LhButton>
</template>

アバターとの組み合わせ

アバターとの組み合わせ

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

<template>
  <LhSkeleton avatar :rows="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton avatar :rows="2" />
</template>

アニメーションを無効化

静的スケルトン

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

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeleton :rows="3" :animated="false" />
</template>

SkeletonItem 単体プレースホルダー

SkeletonItem

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

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

<script>
export default {}
</script>

<template>
  <LhSkeletonItem variant="circle" />
  <LhSkeletonItem variant="rect" style="width: 120px; height: 60px" />
</template>

Skeleton API

Props

プロパティ名	説明	型	デフォルト値
loading	読み込み中かどうか（false のとき default スロットをレンダリング）	boolean	true
rows	テキスト行数	number	3
avatar	円形アバターのプレースホルダーを含めるか	boolean	false
animated	アニメーションを有効化するか	boolean	true
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Slots

スロット名	説明
default	loading が false のときにレンダリングされる実際のコンテンツ

SkeletonItem API

Props

プロパティ名	説明	型	デフォルト値
variant	プレースホルダーブロックの形状	'text' | 'rect' | 'circle'	'text'
animated	アニメーションを有効化するか	boolean	true
sx	sx クイックレイアウトプロパティ	LhSxProps	—

テーマ変数

変数	説明	デフォルト値
--lh-skeleton-bg	プレースホルダーブロックのベースカラー	インク色（text-regular）の 10% 透明ミックス
--lh-skeleton-highlight	シマー ハイライト色	ベースカラーを白へ 45% 明るくした色
--lh-skeleton-radius	基本角丸	--lh-border-radius-small

アクセシビリティ

• プレースホルダーブロックは aria-hidden="true" でスクリーンリーダーに読み上げられない
• コンテナは aria-busy="true" + aria-live="polite"。読み込み完了後にコンテンツが切り替わると自動的に読み上げられる
• prefers-reduced-motion: reduce のときシマーアニメーションは自動的に無効化される

型定義

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

LhSkeletonProps

export interface LhSkeletonProps {
  /** 読み込み中かどうか（false のとき default スロットの実際のコンテンツをレンダリング） */
  loading?: boolean
  /** テキスト行数 */
  rows?: number
  /** 円形アバターのプレースホルダーを含めるか */
  avatar?: boolean
  /** アニメーションを有効化するか */
  animated?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhSkeletonItemProps

export interface LhSkeletonItemProps {
  /** プレースホルダーブロックの形状 */
  variant?: LhSkeletonVariant
  /** アニメーションを有効化するか */
  animated?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhSkeletonVariant _{（@lh-ui/share/core/skeleton から）}

/** スケルトンプレースホルダーブロックの形状 */
export type LhSkeletonVariant = 'text' | 'rect' | 'circle'