骨架

骨架是尚未載入元件的預覽佔位符，可減少載入時間的挫折感。

簡介

骨架為使用者提供 UI 在資料載入時的外觀預期。它有助於減少對長時間載入的感知，同時提供更有趣的載入狀態。

Lorem ipsum 是圖形、印刷和出版產業中常用的佔位文字。

<Card variant="outlined" sx={{ width: 343, display: 'flex', gap: 2 }}>
  <AspectRatio ratio="21/9">
    <Skeleton variant="overlay">
      <img
        alt=""
        src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
      />
    </Skeleton>
  </AspectRatio>
  <Typography>
    <Skeleton>
      Lorem ipsum is placeholder text commonly used in the graphic, print, and
      publishing industries.
    </Skeleton>
  </Typography>
</Card>

<Card variant="outlined" sx={{ width: 343, display: 'flex', gap: 2 }}>
  <AspectRatio ratio="21/9">
    <Skeleton variant="overlay">
      <img
        alt=""
        src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
      />
    </Skeleton>
  </AspectRatio>
  <Typography>
    <Skeleton>
      Lorem ipsum is placeholder text commonly used in the graphic, print, and
      publishing industries.
    </Skeleton>
  </Typography>
</Card>

按下 Enter 開始編輯

基礎知識

import Skeleton from '@mui/joy/Skeleton';

有兩種使用骨架元件的方法

遮罩元件：請參閱頭像、圖片和排版內嵌範例。骨架元件將繼承其尺寸，這樣可以在載入完成時提供更可預測的 UI，同時防止版面配置偏移。
設定自訂寬度和高度：請參閱幾何圖形和文字區塊範例。使用此選項可完全控制骨架大小，完全忽略其父元素尺寸。請注意，如果骨架模仿的實際元件尺寸不同，此選項可能會產生版面配置偏移。

自訂

載入中

骨架預設將 loading 屬性設定為 true。

將其設定為 false 以隱藏骨架元件。如果骨架有子元件，則會改為呈現它們。

Lorem ipsum 是圖形、印刷和出版產業中常用的佔位文字。

動畫

使用 animation 屬性來控制骨架元件的動畫方式。animation 屬性值可以是下列其中之一

pulse（預設）：骨架的背景淡入和淡出。
wave：從左到右流動的波浪動畫。
false：完全停用動畫。

以下示範顯示波浪動畫

Lorem ipsum 是圖形、印刷和出版產業中常用的佔位文字。

若要將 wave 動畫設定為所有骨架元件實例的預設值，請使用佈景主題的預設屬性

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

const theme = extendTheme({
  components: {
    JoySkeleton: {
      defaultProps: {
        animation: 'wave',
      },
    },
  },
});

function App() {
  return (
    <CssVarsProvider theme={theme}>
      <Skeleton />{' '}
      {/* The Skeleton component will have the wave animation by default */}
    </CssVarsProvider>
  );
}

頭像

顯示頭像時，請使用頭像元件來包裝骨架。

載入中

<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
  <Skeleton loading={loading} />
</Avatar>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
  <Switch
    size="sm"
    checked={loading}
    onChange={(event) => setLoading(event.target.checked)}
  />
  <FormLabel>Loading</FormLabel>
</FormControl>

<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
  <Skeleton loading={loading} />
</Avatar>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
  <Switch
    size="sm"
    checked={loading}
    onChange={(event) => setLoading(event.target.checked)}
  />
  <FormLabel>Loading</FormLabel>
</FormControl>

按下 Enter 開始編輯

圖片

顯示圖片時，請使用長寬比元件來包裝骨架。

載入中

排版內嵌

在排版元件和文字之間插入骨架，以顯示佔位符行。

標題

歷史、目的和用途

Lorem ipsum 是圖形、印刷和出版產業中常用的佔位文字，用於預覽版面配置和視覺模型。

載入中

幾何圖形

若要建立特定的骨架形狀，請使用 variant 屬性，並在 circular 或 rectangular 之間選擇。若要在特定尺寸上顯示，請使用 width 和 height 屬性。

<Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
  <Skeleton variant="circular" width={48} height={48} />
  <div>
    <Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
    <Skeleton variant="rectangular" width={140} height="1em" />
  </div>
</Box>

<Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
  <Skeleton variant="circular" width={48} height={48} />
  <div>
    <Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
    <Skeleton variant="rectangular" width={140} height="1em" />
  </div>
</Box>

按下 Enter 開始編輯

width 和 height 屬性支援響應式值的物件表示法。

以下範例示範如何建立具有圓形形狀的骨架元件，在行動裝置上為 40x40px，在桌上型電腦上為 48x48px。

<Skeleton
  variant="circular"
  width={{ xs: 40, md: 48 }}
  height={{ xs: 40, md: 48 }}
/>

文字區塊

使用 variant="text" 和 level 屬性來建立遵循佈景主題排版樣式的骨架文字區塊。

level 屬性值可以是佈景主題的排版相關 token。骨架文字的結果將具有與 level 屬性的文字相同的高度。

h1 字體

h2 字體

body-md 字體

body-sm 字體

body-xs 字體

<Skeleton variant="text" level="h1" />
<Typography level="h1">h1 Typeface</Typography>

<Skeleton variant="text" level="h2" />
<Typography level="h2">h2 Typeface</Typography>

<Skeleton variant="text" />
<Typography>body-md Typeface</Typography>

<Skeleton variant="text" level="body-sm" />
<Typography level="body-sm">body-sm Typeface</Typography>

<Skeleton variant="text" level="body-xs" />
<Typography level="body-xs">body-xs Typeface</Typography>

<Skeleton variant="text" level="h1" />
<Typography level="h1">h1 Typeface</Typography>

<Skeleton variant="text" level="h2" />
<Typography level="h2">h2 Typeface</Typography>

<Skeleton variant="text" />
<Typography>body-md Typeface</Typography>

<Skeleton variant="text" level="body-sm" />
<Typography level="body-sm">body-sm Typeface</Typography>

<Skeleton variant="text" level="body-xs" />
<Typography level="body-xs">body-xs Typeface</Typography>

按下 Enter 開始編輯

常見範例

基本卡片

優勝美地國家公園

2021 年 4 月 24 日至 5 月 2 日

總價

$2,900

留言

API

請參閱以下文件，以取得此處提及之元件的所有屬性和類別的完整參考。