Skeleton

3.0.1

O componente Skeleton nos permite comunicar de forma visual o carregamento de outros componentes.

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;

Anatomia do componente

O componente é composto por um retângulo com uma animação que alterna suas cores.

Guidelines

Utilizamos esse componente de forma individual, para representar o carregamento de outros componentes atômicos e compostos.

Personalização

É possível personalizar o Skeleton para atender a necessidade de componentes locais, ajustando propriedades de width, height e border radius.

Recomendação de uso

Comunicar o carregamento de componentes compostos
Comunicar o carregamento de componentes atômicos
Comunicar o carregamento de componentes locais

Componentes relacionados

Spinner - Pode ser usado para informar o processamento de ações em tempo real.

Implementação

Instale o 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.