Componentes
Grid
1 a 6 colunas. Gap da escala (8 · 12 · 16 · 24 · 32) e os cortes da margem (md 768, xl 1280).
betaSuperfíciedesde 0.2.0@hiboupay/react
Exemplos#
Liquidado hoje
R$ 26.300
Pendente
R$ 10.300
Falhou
R$ 480
1 → 2 → 3 nos cortes da margem
largura toda
Resumo do dia
PIX
Uma coluna.
Boleto
Outra coluna.
Item que atravessa
Mesa
PIX
Boleto
Crédito
Celular · 390
PIX
Boleto
Crédito
Uma coluna no estreito · três na mesa
Importar#
tsx
import { Grid, GridItem } from "@hiboupay/react";
import type { GridProps, GridItemProps, GridColumns, GridCols, GridGap } from "@hiboupay/react";Quando usar#
Use quando
- Fila de MetricWidget.
- Cartões lado a lado.
- Dois campos no mesmo andar de um formulário.
Não use quando
- Tabela: DataTable.
- Empilhar Grid dentro de Grid mais de uma vez.
- Inventar gap fora da escala.
Variantes#
1
Pilha. Celular, formulário estreito.
2 / 3 / 4
Métricas e cartões.
6
Só para peças miúdas (avatares, chips). Quase nunca.
Anatomia#
- 01Contêiner display:grid
- 02Colunas base / md / xl
- 03Gap da escala
- 04Alinhamento dos itens
- 05GridItem com span, mdSpan e xlSpan
Estados#
estático
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| columns | 1|2|3|4|6 | { base, md?, xl? } | 1 | md = 768, xl = 1280 — os mesmos da gutter. |
| gap | 2 | 3 | 4 | 6 | 8 | 4 | 8 · 12 · 16 · 24 · 32 px. |
| align | "start" | "center" | "stretch" | "stretch" | Alinhamento vertical dos itens. |
| GridItem.span | 1 | 2 | 3 | 4 | 6 | Largura em colunas na base. | |
| GridItem.mdSpan / xlSpan | 1 | 2 | 3 | 4 | 6 | Largura nos cortes. |
Acessibilidade#
Teclado
—Layout. O foco mora nos filhos.
Leitor de tela
- —É um div. Não anuncie a grade; anuncie o conteúdo.
Boas práticas#
Faça
- No celular, base: 1. Métricas: { base: 1, md: 2, xl: 3 }.
- gap 4 (16) entre cartões, gap 6 (24) entre seções.
Evite
- 12 colunas, offset, pull/push.
- gap-5 (20) ou gap arbitrário em px.
Conteúdo#
- ——
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.