Skeleton

3.0.1

El componente Skeleton nos permite comunicar de forma visual que un componente está cargando.

Default

import React from "react";
import { Skeleton } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Skeleton height="3rem" width="9rem" borderRadius="2" />
);

export default Example;

Anatomía del componente

El componente está integrado por un rectángulo con una animación que alterna sus colores.

Guidelines

Usamos este componente de forma individual, para representar visualmente la carga de otros componentes atómicos y compuestos.

Personalización

Es posible personalizar el Skeleton para adaptarse a componentes locales, ajustando la propiedad de width, height y border radius.

Recomendaciones de uso

Comunicar la carga de componentes compuestos
Comunicar la carga de componentes atómicos
Comunicar la carga de componentes locales

Componentes relacionados

Spinner - Puede ser usado para informar el procesamiento de acciones en tiempo real.

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/skeleton

Props

Additional props are passed to the <Skeleton> element. See div docs for a list of props accepted by the <Skeleton> element.

Skeleton

Name	Type	Description
width*	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height*	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
borderRadius	string	The border radius of the skeleton.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.