Componentes
Tabela
Em cartão, fios sem listras, número à direita com sinal sempre; no celular, cada linha vira um item de três linhas — sem outra marcação.
Quando não usar
- identificador interno na tela
- linha inteira clicável
- mais de uma ação por linha
Extrato
claro
| Data | Lançamento | Valor (H$) |
|---|---|---|
| 02/10 às 23:49 | Estorno da solicitação 12 | +400,00 |
| 30/09 às 10:02 | Débito da etapa 5 | −989,00 |
escuro
| Data | Lançamento | Valor (H$) |
|---|---|---|
| 02/10 às 23:49 | Estorno da solicitação 12 | +400,00 |
| 30/09 às 10:02 | Débito da etapa 5 | −989,00 |
<div class="hx-card hx-card-flush">
<div class="hx-table-scroll">
<table class="hx-table">
<caption>Extrato</caption>
<thead><tr><th scope="col">Data</th><th scope="col">Lançamento</th><th scope="col" class="hx-num">Valor (H$)</th></tr></thead>
<tbody>
<tr><td class="hx-cell-date">02/10 às 23:49</td><th scope="row" class="hx-cell-title"><a href="#">Estorno da solicitação 12</a></th><td class="hx-num hx-cell-end">+400,00</td></tr>
<tr><td class="hx-cell-date">30/09 às 10:02</td><th scope="row" class="hx-cell-title"><a href="#">Débito da etapa 5</a></th><td class="hx-num hx-cell-end">−989,00</td></tr>
</tbody>
</table>
</div>
<div class="hx-load-more"><button class="hx-button" type="button">Carregar mais lançamentos</button></div>
</div>No celular
A 1ª linha é .hx-cell-title + .hx-cell-end; a 2ª, .hx-cell-desc; as demais células formam o metadado da 3ª. A ação da linha vai para o detalhe.
Formatos
| Dado | Formato |
|---|---|
| Quantia | +400,00 · −989,00 (menos U+2212); unidade no cabeçalho |
| Moeda Hibex | H$ 31.411,00 · −H$ 989,00; "Moeda Hibex" por extenso no texto |
| Data | 02/10 às 23:49 — o ano só quando não é o corrente |
| Período no mesmo dia | 29/09 09:00 → 10:00 |
| Pessoa | o nome; "Sistema" quando não é pessoa |
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-table, .hx-table-scroll | tabela e a rolagem na faixa média |
.hx-num, .hx-cell-date, .hx-cell-action | número, data, ação por linha |
.hx-cell-title, -end, -desc | as três linhas no celular |
.hx-table-header | cabeçalho: título e filtro |
.hx-load-more | o fim da lista: "Carregar mais" (ADR-0035) |
Origem: cap. 06 §3.1–§3.3 · ADR-0023, ADR-0030 · desde a versão 0.1.0