Skeleton

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.