Componentes
43. Lista de dados e degradação responsiva
estável
seed-componentes.md v2.00 · §43seção 87 de 18443-lista-de-dados-e-degradacao-responsiva-estavel.md · MD5 ad06ecc5Título completo no canon: Lista de dados e degradação responsiva — estável (v0.45) · LD1–LD5 · Bloco 6/6D · fecha a paridade mobile dos dados
Em uma frase: No celular a tabela degrada por IMPORTÂNCIA de coluna: a alta fica, a média vira par rótulo-valor, a baixa some.
Vocabulário desta seção: pop-in
(decisão registrada — ver Histórico da seção)
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| LD1 | Lista de dados = <dl> com grupos em <div> (padrão MDN), nomeada; dt em caixa alta discreta, dd com peso; numérico em mono; para LEITURA de um registro (detalhe), nunca para comparar linhas (comparar = tabela §40) |
MDN/eBay/Fedotov (semântica de par rótulo-valor); Setproduct (a régua tabela×lista) | <table> de 2 colunas p/ pares (semântica errada); divs cegos |
| LD2 | Degradação tabela→mobile em DOIS regimes: (a) fallback universal = wrapper de rolagem horizontal do DT1 (sempre presente, custo zero); (b) modo cards OPT-IN (data-mobile="cards"): <640px cada linha vira card com o rótulo da coluna migrando via data-label (o pop-in do Fiori em CSS puro) |
Roselli (fallback); Fiori (pop-in por importância); opt-in porque nem toda tabela merece card (comparação morre no card — Setproduct) | Cards como default (mata a comparação); duplicar o DOM (tabela+cards) |
| LD3 | Importância de coluna (Fiori): cada coluna declara high (fica no card) · default (migra com rótulo) · low (some no card) — decisão EDITORIAL por tabela, com a régua: identificador+valor+status são high; metadados são low |
Fiori literal (High/Medium/Low); a coluna que some precisa ser decisão, não acidente | Espremer tudo no card (ilegível); sumir colunas sem critério |
| LD4 | No modo cards: thead oculto ACESSIVELMENTE (clip — o SR ainda tem a tabela), célula = linha rótulo: valor com o rótulo via ::before/data-label; seleção e ações sobrevivem (checkbox e ⋯ ficam) |
A tabela continua tabela para AT; o rótulo visual migra | display:none no thead (some para todos); perder a seleção no mobile |
| LD5 | Fronteiras: "Show Details" do Fiori (expandir os low ocultos) = evolução com demanda; virtualização/agrupamento = produto; a régua de QUANDO usar card×tabela×lista fica no §40/DT8 + aqui | Recorte honesto | Spec do Show Details sem caso real |
Pares: herdados. Os 7 testes: 1 ✓ · 2 rótulo migrado por texto (nunca só posição) · 3 grayscale ok · 4 dl×tabela a 1s (leitura×comparação) · 5 um regime por tabela · 6 low declarado visível na spec da tabela · 7 360px: card sem overflow, alvos vivos. (Suite 6D ✓; render R10: linha=bloco, low oculta, zero overflow, medidos em pixels.)
Também cita o §43: tela-busca, tela-tabela.