Skeleton 骨架屏

在內容載入完成前提供佔位圖。佔位塊 aria-hidden 對螢幕閱讀器隱藏，容器以 aria-busy 與 aria-live 通知載入狀態變化；流光動畫尊重 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'