Skeleton スケルトン

コンテンツの読み込みを待つ間のプレースホルダーです。

基本的な使い方

基本的な使い方

import { LhSkeleton } from '@lh-ui/react'

export default function Demo() {
  return <LhSkeleton avatar rows={2} sx={{ w: 300 }} />
}

Skeleton Props

プロパティ	説明	型	使用可能な値	デフォルト値
loading	スケルトンを表示するかどうか（false の時は子ノードを描画）	boolean	—	true
rows	テキストの行数	number	—	3
avatar	円形のアバタープレースホルダーを含めるかどうか	boolean	—	false
animated	アニメーションを有効にするかどうか	boolean	—	true
sx	クイックレイアウトプロパティ	SxProps	—	—

SkeletonItem Props

LhSkeletonItem は単体でエクスポートされるプレースホルダーブロックで、単独で使って任意のスケルトン構造を組み立てられます。

プロパティ	説明	型	使用可能な値	デフォルト値
variant	プレースホルダーブロックの形状	'text' | 'rect' | 'circle'	—	'text'
animated	アニメーションを有効にするかどうか	boolean	—	true
className	クラス名を追加	string	—	—
style	インラインスタイルを追加	CSSProperties	—	—
sx	クイックレイアウトプロパティ	SxProps	—	—

import { LhSkeletonItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, width: 300 }}>
      <LhSkeletonItem variant="circle" />
      <div style={{ flex: 1 }}>
        <LhSkeletonItem style={{ marginBottom: 8 }} />
        <LhSkeletonItem style={{ width: '60%' }} />
      </div>
    </div>
  )
}

行幅の計算

rows > 1 の時、最終行は 60% に縮み、実際の段落組版をシミュレートします。ルート要素には確定した幅が必要です（行幅はパーセンテージです）。

アクセシビリティ

スケルトンコンテナは aria-busy="true" + aria-live="polite" を出力します。プレースホルダーブロックはすべて aria-hidden で、データの準備ができるとスクリーンリーダーが実際の内容を読み上げ直します。prefers-reduced-motion の場合はアニメーションが自動的に静的プレースホルダーにダウングレードします。

スタイル

import '@lh-ui/react/style/skeleton'