Uma visão geral de tudo o que o sistema de design oferece. Tema: signal. Idioma: Português.
Ecrã de lista
Ecrã de lista genérico com título, barra de ferramentas e linhas que funcionam em computador e em telemóvel.
Elementos de interface já feitos e coerentes entre si, renderizados no servidor.
O vocabulário do próprio framework chama-lhes partials: ui.Templates() devolve partials e docs/site/templates.md documenta-os com esse nome. A palavra desta página mudou; a do código não.
As ligações aqui não estão ativas
Ligações inativas; o código do exemplo é fornecido.
Cada exemplo abaixo fica na sua própria moldura.
O conteúdo de exemplo está em inglês. Os invólucros de exemplo estão traduzidos.
page-header
A barra de título do ecrã: um h1, um subtítulo opcional e uma ação principal.
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.
<div rst-list><div rst-row>
<span rst-row-main><a href="/posts/2">Why we moved off the old runner</a><small rst-row-sub>Draft · saved 20 minutes ago</small></span>
</div></div>
seg-tabs
Um controlo segmentado de ligações renderizadas no servidor. O separador atual é aria-current numa ligação.
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
<div rst-empty>
<h2 rst-empty-title>Nothing here yet</h2>
<p rst-empty-body>No posts yet. Your first one is a good place to start.</p>
<form rst-empty-cta method="post" action="/posts/seed">
<input type="hidden" name="csrf" value="tok-123">
<button rst-btn="primary" type="submit">Add sample posts</button>
</form>
</div>
Só a frase
<div rst-empty>
<p rst-empty-body>No comments on this post yet.</p>
</div>