Componentes
Skeleton
A forma da peça que ainda não chegou. Raio, altura e etiqueta iguais aos da peça real. Sempre aria-hidden; quem carrega anuncia.
betaEstadodesde 0.1.0@hiboupay/react
Exemplos#
carregando
Mesma forma do conteúdo final
Linhas e bloco livre
Importar#
tsx
import { Skeleton, SkeletonCard, SkeletonRows, SkeletonMetric } from "@hiboupay/react";Quando usar#
Use quando
- Lista, tabela ou cartão carregando.
Não use quando
- Ação curta: Button loading.
Variantes#
Skeleton
Bloco livre (dê altura e largura).
SkeletonCard
Cartão com título Sora 16 e etiqueta raio 6.
SkeletonRows
Linhas de 48 (36 no denso), a altura da tabela.
SkeletonMetric
Métrica com barra.
Anatomia#
- 01Espelha a peça que anuncia: linha 48 da tabela, cartão 16, etiqueta raio 6
- 02Bloco wash com shimmer
- 03Nunca pílula
Estados#
shimmer (desliga com reduced-motion)
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className | string | Tamanho e raio do bloco. | |
| SkeletonRows.rows | number | 6 | Quantidade de linhas. |
Acessibilidade#
Teclado
—Não é interativo.
Leitor de tela
- —aria-hidden. Marque o contêiner com aria-busy ou use Spinner com label.
Boas práticas#
Faça
- Mesma forma do conteúdo final.
Evite
- Skeleton genérico que não lembra o conteúdo.
Conteúdo#
- ——
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.