骨架屏

在数据加载之前显示内容占位符预览，以减少加载时间带来的挫败感。

组件的数据可能不会立即可用。您可以使用骨架屏来提高页面的感知响应速度。这会让人感觉事情立即发生，然后信息会在屏幕上逐步显示（参见避免使用加载指示器）。

用法

该组件旨在直接在您的组件中使用。例如

{
  item ? (
    <img
      style={{
        width: 210,
        height: 118,
      }}
      alt={item.title}
      src={item.src}
    />
  ) : (
    <Skeleton variant="rectangular" width={210} height={118} />
  );
}

变体

该组件支持 4 种形状变体

text（默认）：表示单行文本（您可以通过字体大小调整高度）。
circular、rectangular 和 rounded：具有不同的边框半径，让您可以控制尺寸。

{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />

{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />

{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />

{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />

按 Enter 开始编辑

动画

默认情况下，骨架屏会 pulsate 动画，但您可以将动画更改为 wave 或完全禁用它。

<Skeleton />
<Skeleton animation="wave" />
<Skeleton animation={false} />

<Skeleton />
<Skeleton animation="wave" />
<Skeleton animation={false} />

按 Enter 开始编辑

Pulsate 示例

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo @ Tomorrowland 主舞台 2019 | 官方…

Don Diablo39.6万次观看 • 1周前

Queen - Greatest Hits

Queen Official4000万次观看 • 3年前

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris, Sam Smith - Promises (官方MV)

Calvin Harris1.3亿次观看 • 10个月前

Wave 示例

Ted5 小时前

为什么苏格兰首席大臣 Nicola Sturgeon 认为 GDP 不是衡量国家成功的正确指标

推断尺寸

除了接受 width 和 height 属性外，该组件还可以推断尺寸。

当涉及到排版时，它工作良好，因为它的高度是使用 em 单位设置的。

<Typography variant="h1">{loading ? <Skeleton /> : 'h1'}</Typography>

body1

caption

但是当涉及到其他组件时，您可能不想重复宽度和高度。在这些情况下，您可以传递 children，它将从它们那里推断出宽度和高度。

loading ? (
  <Skeleton variant="circular">
    <Avatar />
  </Skeleton>
) : (
  <Avatar src={data.avatar} />
);

Ted

颜色

可以通过更改组件的 background-color CSS 属性来自定义组件的颜色。这在黑色背景上尤其有用（因为否则骨架屏将不可见）。

<Skeleton
  sx={{ bgcolor: 'grey.900' }}
  variant="rectangular"
  width={210}
  height={118}
/>

<Skeleton
  sx={{ bgcolor: 'grey.900' }}
  variant="rectangular"
  width={210}
  height={118}
/>

按 Enter 开始编辑

可访问性

骨架屏提供了传统加载指示器方法的替代方案。骨架屏不是显示抽象的小部件，而是创建对即将到来的内容的预期并减少认知负荷。

骨架屏的背景颜色使用最少的亮度，以便在良好条件下（良好的环境光线、良好的屏幕、无视觉障碍）可见。

ARIA

无。

键盘

骨架屏不可聚焦。

API

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

<Skeleton />