Ecrã de lista genérico com título, barra de ferramentas e linhas que funcionam em computador e em telemóvel.
Cada exemplo funciona de verdade, mas as suas ligações não levam a lado nenhum. HTML mostra a marcação para copiar.
page-header
A barra de título do ecrã: um h1, um subtítulo opcional e uma ação principal.
Título, subtítulo e uma ação principal
<headerrst-page-header>
<divrst-page-header-titles>
<h1>Publicações</h1>
<prst-page-header-sub>Tudo o que escreveu, o mais recente primeiro.</p>
</div>
<arst-btn="primary"href="/posts/new">
<svgclass="icon"viewBox="0 0 24 24"fill="none"stroke="currentColor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"aria-hidden="true"><pathd="M5 12h14"/><pathd="M12 5v14"/></svg>
Escrever uma publicação
</a>
</header>
{{template"page-header"dict"Title""Publicações""Sub""Tudo o que escreveu, o mais recente primeiro.""ActionHref""/posts/new""ActionLabel""Escrever uma publicação""ActionIcon""plus"}}
Nada em Hidden diz qual par é a página, então o padrão levaria page=4 para um conjunto de resultados que já não tem quatro páginas. ClearHref é como uma aplicação reinicia isso.
Aqui não se vê nada até chegar com a tecla de tabulação.
list-row-action
Uma linha de lista: o nome do registo como ligação principal, uma linha de dados e uma ação secundária.
Marca inicial, estado e uma ação
Coloque isto dentro de <div rst-list>.
<divrst-row>
<spanrst-row-leaddata-lead="accent"aria-hidden="true">RN</span>
<spanrst-row-main><ahref="/posts/1">Notas da versão, agosto</a>
<smallrst-row-sub>Publicado a 2 de agosto · 4 min de leitura</small>
</span>
<spanrst-statusrst-tone="positive">Publicado</span>
<arst-row-actionhref="/posts/1/edit"aria-label="Editar Notas da versão, agosto">Editar</a>
</div>
Coloque isto dentro de <div rst-list>.
{{template"list-row-action"dict"Href""/posts/1""Main""Notas da versão, agosto""Sub""Publicado a 2 de agosto · 4 min de leitura""ActionHref""/posts/1/edit""ActionLabel""Editar""ActionAria""Editar Notas da versão, agosto""StatusTone""positive""StatusLabel""Publicado""Lead""accent""LeadInitial""RN"}}
Só o nome e a linha de detalhe
Coloque isto dentro de <div rst-list>.
<divrst-row>
<spanrst-row-main><ahref="/posts/2">Porque deixámos o antigo executor</a>
<smallrst-row-sub>Rascunho · guardado há 20 minutos</small>
</span>
</div>
Coloque isto dentro de <div rst-list>.
{{template"list-row-action"dict"Href""/posts/2""Main""Porque deixámos o antigo executor""Sub""Rascunho · guardado há 20 minutos"}}
row-menu
As outras ações de uma linha, atrás de um botão ⋮. Uma destrutiva leva à sua página de confirmação.
{{template"media-grid"dict"Items" (list
(dict"Desc""O passo do pagamento, com o formulário do cartão aberto.""Height" 3200 "Href""/images/1""Menu" (list (dict"Href""/images/1/edit""Label""Editar") (dict"Danger"true"Href""/images/1/delete""Label""Eliminar…")) "Meta""1280 × 3200 · 412 KB""Name""Checkout, passo 2""Select""1""Selected"true"Src""/images/checkout.png""Width" 1280)
(dict"Desc""""Height" 2400 "Href""/images/2""Menu" (list (dict"Href""/images/2/edit""Label""Editar") (dict"Danger"true"Href""/images/2/delete""Label""Eliminar…")) "Meta""1280 × 2400 · 318 KB""Name""Página de preços""Select""2""Src""/images/pricing.png""Width" 1280))}}
Envolva a grelha e um bulk-bar num único formulário. Cada caixa envia o valor Select do seu mosaico com o nome "id"; defina SelectName para o mudar. Dentro do formulário, os itens do menu têm de ser links.
pagination
Uma tira numerada de ligações normais, para que a paginação continue a funcionar com o JavaScript desligado.
Sem Label, por isso o nome acessível do nav vem do catálogo.
empty-state
O cartão de estado vazio. Um estado vazio com caminhos para os primeiros passos.
Com um apelo à ação por POST
<divrst-empty>
<h2rst-empty-title>Ainda não há nada aqui</h2>
<prst-empty-body>Ainda não há publicações. A primeira é um bom ponto de partida.</p>
<formrst-empty-ctamethod="post"action="/posts/seed">
<inputtype="hidden"name="csrf"value="tok-123">
<buttonrst-btn="primary"type="submit">Adicionar publicações de exemplo</button>
</form>
</div>
{{template"empty-state"dict"Body""Ainda não há publicações. A primeira é um bom ponto de partida.""Title""Ainda não há nada aqui""ActionLabel""Adicionar publicações de exemplo""PostAction""/posts/seed""Hidden" (list (list"csrf""tok-123"))}}
Só a frase
<divrst-empty>
<prst-empty-body>Esta publicação ainda não tem comentários.</p>
</div>
{{template"empty-state"dict"Body""Esta publicação ainda não tem comentários."}}