骨架屏

骨架屏是尚未加载的组件的预览占位符，减少加载时的挫败感。

简介

骨架屏为用户提供数据加载时 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 属性值可以是主题的排版相关令牌。骨架文本的结果将具有与 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

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。