Componentes
Carregar mais
No fim de uma lista longa, o botão que anexa o próximo bloco ao que já está na tela — no desktop e no celular. Nunca some; quando não vem nada, a mensagem padrão.
Quando usar
- lista ou tabela com mais itens do que cabe num bloco
- sempre com filtro ou busca acima
Quando não usar
- páginas numeradas
- rolagem infinita
- "Não há mais itens" ou esconder o botão
A ideia
Antes das classes, a ideia em rabiscos: Carregar mais, na seção de Ideias, com um exemplo para experimentar.
Estados
claro
escuro
<div class="hx-card hx-card-flush">
<div class="hx-load-more">
<button class="hx-button" type="button">Carregar mais lançamentos</button>
</div>
</div>claro
escuro
<div class="hx-card hx-card-flush">
<div class="hx-load-more">
<button class="hx-button" type="button" disabled aria-busy="true"><span class="hx-spinner" aria-hidden="true"></span>Carregando…</button>
</div>
</div>claro
escuro
<div class="hx-card hx-card-flush">
<div class="hx-load-more">
<div class="hx-message hx-message-neutral hx-message-compact" role="status"><p>Nenhum item novo por enquanto.</p></div>
<button class="hx-button" type="button">Carregar mais lançamentos</button>
</div>
</div>claro
escuro
<div class="hx-card hx-card-flush">
<div class="hx-load-more">
<div class="hx-message hx-message-danger hx-message-compact" role="alert"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg><p><span class="hx-visually-hidden">Erro:</span>Não foi possível carregar. Tente de novo.</p></div>
<button class="hx-button" type="button">Carregar mais lançamentos</button>
</div>
</div>Experimente
Comportamento
- o bloco seguinte é anexado ao fim; nada salta, nada some;
- o foco fica no botão; um texto escondido (
role="status") anuncia quantos itens entraram; - sem script, o botão é um link para a mesma lista com o bloco seguinte incluído (
?ate=100); - cursor e ordem estável são do produto; uma resposta vazia precisa ser distinguível de um erro.
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-load-more | a caixa no fim da lista; dentro de um cartão, separada por um fio |
.hx-button | o botão: "Carregar mais <coisa>" |
.hx-message-neutral.hx-message-compact | "Nenhum item novo por enquanto." — role="status" |
disabled, aria-busy="true" | carregando |
Origem: cap. 06 §3.7 · ADR-0035 · desde a versão 0.2.0