Обзор всего, что даёт дизайн-система. Тема: day. Язык: Русский.
Экран списка
Обычный экран списка: заголовок, панель инструментов и строки, работающие и на десктопе, и на телефоне.
Готовые и согласованные между собой элементы интерфейса, отрисованные на сервере.
В словаре самого фреймворка это partials: ui.Templates() возвращает partials, и docs/site/templates.md описывает их под этим именем. Слово на этой странице изменилось, слово в коде — нет.
Ссылки здесь неактивны
Ссылки неактивны, исходник примера приложен.
Каждый пример ниже — в своей рамке.
Содержимое примеров на английском. Каркасы примеров переведены.
page-header
Заголовочная полоса экрана: h1, необязательный подзаголовок и основное действие.
В Hidden ничто не говорит, какая пара — страница, поэтому по умолчанию page=4 попадёт в набор результатов, где четырёх страниц уже нет. Приложение сбрасывает это через ClearHref.
<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
Сегментированный переключатель из ссылок, отрисованных на сервере. Текущая вкладка — это aria-current на ссылке.
<nav rst-pagination aria-label="Навигация по страницам"><span rst-pagination-disabled>Previous</span><span aria-current="page">1</span><a href="/posts?page=2">2</a><a href="/posts?page=2">Next</a>
</nav>
Label не задан, поэтому доступное имя nav берётся из каталога.
empty-state
Карточка пустого состояния. Пустое состояние с подсказками, с чего начать.
С призывом к действию через 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>
Только фраза
<div rst-empty>
<p rst-empty-body>No comments on this post yet.</p>
</div>