跳到主要內容跳到主要內容
🚀 影響 Joy UI 2025 年的藍圖！參與最新的開發者問卷調查

SkeletonAPI

React Skeleton 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

匯入

import Skeleton from '@mui/joy/Skeleton';
// or
import { Skeleton } from '@mui/joy';

閱讀關於最小化套件大小的指南，以瞭解差異。

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
animation'pulse'
| 'wave'
| false		'pulse'

動畫效果。如果為 false，則停用動畫效果。

childrennode-

如果未設定 src，則用於在 Skeleton 內呈現圖示或文字元素。這可以是元素，或僅僅是字串。

componentelementType-

用於根節點的元件。可以是字串（用於 HTML 元素）或元件。

heightArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		-

骨架的高度。當您不想使骨架適應文字元素，而是想適應例如卡片時，這很有用。

level'h1'
| 'h2'
| 'h3'
| 'h4'
| 'title-lg'
| 'title-md'
| 'title-sm'
| 'body-lg'
| 'body-md'
| 'body-sm'
| 'body-xs'
| 'inherit'
| string		variant === 'text' ? 'body-md' : 'inherit'

套用主題排版樣式。

loadingbooltrue

如果為 true，則顯示骨架。

overlayboolfalse

如果為 true，骨架的位置將變更為 absolute，以填滿最近父元素的可用空間。此 prop 對於建立具有元素尺寸的預留位置很有用。

slotProps{ root?: func
| object }		{}

用於每個內部 slot 的 props。

slots{ root?: elementType }{}

用於每個內部 slot 的元件。

請參閱下方的Slots API 以取得更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，可讓您定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

variant'circular'
| 'inline'
| 'overlay'
| 'rectangular'
| 'text'
| string		'overlay'

將呈現的內容類型。

若要瞭解如何新增自己的 variant，請查看主題元件 — 擴充 variants。

widthArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		-

骨架的寬度。當骨架位於沒有自身寬度的內嵌元素內時，這很有用。

ref 會轉發到根元素。

主題預設 props

您可以使用 JoySkeleton 透過主題變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱類別名稱預設元件描述
root.MuiSkeleton-root'span'呈現根的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱規則名稱描述
.MuiSkeleton-body-lgbody-lg如果 level="body-lg"，則套用至根元素的類別名稱。
.MuiSkeleton-body-mdbody-md如果 level="body-md"，則套用至根元素的類別名稱。
.MuiSkeleton-body-smbody-sm如果 level="body-sm"，則套用至根元素的類別名稱。
.MuiSkeleton-body-xsbody-xs如果 level="body-xs"，則套用至根元素的類別名稱。
.MuiSkeleton-h1h1如果 level="h1"，則套用至根元素的類別名稱。
.MuiSkeleton-h2h2如果 level="h2"，則套用至根元素的類別名稱。
.MuiSkeleton-h3h3如果 level="h3"，則套用至根元素的類別名稱。
.MuiSkeleton-h4h4如果 level="h4"，則套用至根元素的類別名稱。
.MuiSkeleton-title-lgtitle-lg如果 level="title-lg"，則套用至根元素的類別名稱。
.MuiSkeleton-title-mdtitle-md如果 level="title-md"，則套用至根元素的類別名稱。
.MuiSkeleton-title-smtitle-sm如果 level="title-sm"，則套用至根元素的類別名稱。
.MuiSkeleton-variantCircularvariantCircular如果 variant="circular"，則套用至根元素的類別名稱。
.MuiSkeleton-variantInlinevariantInline如果 variant="inline"，則套用至根元素的類別名稱。
.MuiSkeleton-variantOverlayvariantOverlay如果 variant="overlay"，則套用至根元素的類別名稱。
.MuiSkeleton-variantRectangularvariantRectangular如果 variant="rectangular"，則套用至根元素的類別名稱。
.MuiSkeleton-variantTextvariantText如果 variant="text"，則套用至根元素的類別名稱。

您可以使用以下自訂選項之一覆寫元件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。