跳转到内容

Skeleton

在数据完整加载之前将您的内容显示为一个占位的预览,这样可以减少由加载时间造成的困扰。

您的组件需要的数据可能无法立刻加载。 你可以通过使用骨架屏来提高页面的感知响应度。 It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. Avoid The Spinner).

使用

骨架屏组件可以直接在你的组件内使用。 就像这样:

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

变体

The component supports 4 shape variants:

  • text (default): represents a single line of text (you can adjust the height via font size).
  • circular, rectangular, and rounded: come with different border radius to let you take control of the size.
{/* 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} />

动画

默认情况下,骨架屏组件使用 pulsates 动画,但是你也可以更改为 wave 动画或者完全禁用它。

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

脉动动画例子

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396k views • a week ago
Queen - Greatest Hits

Queen - Greatest Hits

Queen Official40M views • 3 years ago
Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130M views • 10 months ago

波浪动画例子

Ted talk
Ted5 hours ago
Nicola Sturgeon on a TED talk stage

Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:

推断尺寸

除了接受 widthheight props 外,组件还可以自行推断出尺寸。

当您在排版的时候会得心应手,因为它的高度是用 em 单位设置的。

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

但是,当涉及到其他组件时,你可能不想重复申明宽度和高度。 在这些情况下,你可以传入 children,然后它将会从它们中推断出它的宽度和高度。

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

.

Ted

Color 颜色

The color of the component can be customized by changing its background-color CSS property. This is especially useful when on a black background (as the skeleton will otherwise be invisible). This is especially useful when on a black background (as the skeleton will otherwise be invisible). This is especially useful when on a black background (as the skeleton will otherwise be invisible).

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

无障碍设计

骨架屏的动画可以代替传统转圈动画的加载方式。 骨架屏不是一个抽象的小部件,而是提供一个对未来事件的预期,来减少人们的认知负荷。

骨架屏使用的背景色是在良好条件下可见的最小亮度(良好的环境光源、清晰的屏幕、无其他视觉障碍)。

ARIA

无。

键盘输入

骨架屏不能被聚焦。