Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Esqueleto

Mostrar una vista previa de su contenido antes de que se carguen los datos para reducir la frustraci贸n en tiempo de carga.

Es posible que los datos de sus componentes no est茅n disponibles inmediatamente. Puede aumentar el rendimiento percibido por los usuarios usando esqueletos. Parece que las cosas est谩n sucediendo inmediatamente, entonces la informaci贸n se muestra incrementalmente en la pantalla (Cf. Evitar el Spinner).

El componente est谩 dise帽ado para ser utilizado directamente en sus componentes. Por ejemplo:

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

Variantes

El componente soporta 3 variantes de forma.

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

Animaciones

By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely.

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

Pulsate example

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

Ejemplo de onda

Ted talk
Ted5 hours ago

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

Dimensiones inferentes

In addition to accepting width and height props, the component can also infer the dimensions.

It works well when it comes to typography as its height is set using em units.

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

But when it comes to other components, you may not want to repeat the width and height. In these instances, you can pass children and it will infer its width and height from them.

loading
  ? <Skeleton><Avatar /></Skeleton>
  : <Avatar src={data.avatar} />

.

Ted

Accesibilidad

Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load.

The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments).