Un resumen de todo lo que ofrece el sistema de diseño. Tema: signal. Idioma: Español.
Pantalla de lista
Pantalla de lista genérica con título, barra de herramientas y filas que funcionan en escritorio y en móvil.
Elementos de interfaz ya hechos y coherentes entre sí, renderizados en el servidor.
El vocabulario del propio framework los llama partials: ui.Templates() devuelve partials, y docs/site/templates.md los documenta con ese nombre. La palabra de esta página cambió; la del código, no.
Los enlaces aquí no están activos
Enlaces inactivos; se facilita el código del ejemplo.
Cada ejemplo de abajo va en su propio marco.
El contenido de ejemplo está en inglés. Los armazones de ejemplo sí están traducidos.
page-header
La barra de título de la pantalla: un h1, un subtítulo opcional y una acción principal.
Nada en Hidden dice qué par es la página, así que el valor por omisión llevaría page=4 a un conjunto de resultados que ya no tiene cuatro páginas. ClearHref es como una aplicación lo reinicia.
Vacío, con el nombre accesible tomado del catálogo
<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
Un control segmentado de enlaces renderizados en el servidor. La pestaña actual es aria-current en un enlace.
Sin Label, así que el nombre accesible del nav viene del catálogo.
empty-state
La tarjeta de estado vacío. Un estado vacío con vías para dar los primeros pasos.
Con una llamada a la acción 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>
Solo la frase
<div rst-empty>
<p rst-empty-body>No comments on this post yet.</p>
</div>