跳转到内容

Skeleton 骨架屏

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

您的组件需要的数据可能无法立刻加载。 这时,你就可以使用骨架屏来提升用户的观感。 好像感觉到事情马上就要发生了,然后信息在屏幕上逐步地显示(Cf. 避开 Spinner)。

这个组件可以直接在你的组件中使用。 就像这样:

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

变体

组件支持 3 种形状变体。

<Skeleton variant="text" />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width={210} height={118} />

动画

默认情况下,骨架屏会有一个脉冲的动画效果,但是您可以将其更改为一个波浪(wave)动画,或者选择完全禁用它。

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

脉动动画例子

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396 k views • a week ago
Queen - Greatest Hits

Queen - Greatest Hits

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

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130 M views • 10 months ago

波浪动画例子

Ted talk
Ted5 hours ago

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><Avatar /></Skeleton>
  : <Avatar src={data.avatar} />

.

Ted

无障碍设计

骨架屏提供了一个可替代传统旋转动画(spinner)的解决方案。 骨架屏不是一个抽象的小部件,而是提供一个对未来事件的预期,来减少人们的认知负荷。

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