CmSummaryList
Pares rótulo/valor de uma tela de revisão — o "confira antes de confirmar" de um instalador, de um checkout, de um formulário longo. Renderiza um <dl> semântico, então a associação entre rótulo e valor existe para o leitor de tela, e não só no desenho.
Import
import { CmSummaryList } from "cosmemilton-ui/server";Revisão antes de confirmar
Linhas divididas, com o item destrutivo destacado por tone e emphasis.
Revisar e instalar
Confira as escolhas antes de gravar no disco.
- Idioma
- Português (Brasil) · pt_BR.UTF-8
- Teclado
- br-abnt2
- Fuso horário
- America/Sao_Paulo (UTC-3)
- Usuário administrador
- milton
- Rede
- enp3s0 · DHCP
- Disco de destino
- nvme0n1 · 322 GB · será formatado
Nada foi gravado no disco até aqui.
Colunas e layout empilhado
columns={2} e layout="stacked" lado a lado, para a diferença ficar visível.
layout rows
Rótulo à esquerda, valor à direita.
- Host
- srv-app-01
- Endereço IP
- 10.0.2.14
- Portas
- 443, 8443
- Certificado
- Let's Encrypt
- Backup
- Diário, 02:00
- Retenção
- 30 dias
layout stacked
Rótulo acima do valor, tudo alinhado à esquerda.
- Host
- srv-app-01
- Endereço IP
- 10.0.2.14
- Portas
- 443, 8443
- Certificado
- Let's Encrypt
- Backup
- Diário, 02:00
- Retenção
- 30 dias
API rápida
Props principais de cada peça exportada.
CmSummaryList
CmSummaryItem
Notas
Cada par é embrulhado num <div> dentro do <dl> — a única forma válida em HTML de ter pares como células de grid sem quebrar a associação rótulo/valor que os leitores de tela usam.
layout="rows" (padrão) põe rótulo à esquerda e valor à direita, para revisão densa; layout="stacked" põe o rótulo acima do valor, melhor em coluna estreita.
columns define as colunas de PARES (não de rótulos e valores separados); abaixo de 40rem sempre cai para uma.
tone e emphasis existem para o item que muda a decisão — o disco que será apagado, o valor que será cobrado. Se tudo vira destaque, nada é destaque.
divided (padrão true) desenha a linha divisória entre os pares.
Server-safe: sem hooks, exportado de cosmemilton-ui/server.