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'