Перейти к содержимому
Меню
Язык, сейчас Русский
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

дизайн-система rastrillo

Обзор всего, что даёт дизайн-система. Тема: signal. Язык: Русский.

Маршрут

Части, которые сами по себе целый ответ, а не кусок ответа.

Готовые и согласованные между собой элементы интерфейса, отрисованные на сервере.

В словаре самого фреймворка это partials: ui.Templates() возвращает partials, и docs/site/templates.md описывает их под этим именем. Слово на этой странице изменилось, слово в коде — нет.

Ссылки здесь неактивны

Ссылки неактивны, исходник примера приложен.

Каждый пример ниже — в своей рамке.

Содержимое примеров на английском. Каркасы примеров переведены.

error-page

Всё тело ответа с ошибкой: статус, одна честная фраза, путь назад и ссылки для 500, которыми может воспользоваться администратор.

404 — не найдено

Предпросмотр
<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>Мы не нашли эту страницу</h1>
  <p rst-error-body>Возможно, ссылка устарела или страница переехала. Проверьте адрес или вернитесь к началу.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a></p>
</div>

403 — нет доступа

Предпросмотр
<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>У вас нет доступа к этой странице</h1>
  <p rst-error-body>У вашей учётной записи нет доступа сюда. Если вы считаете, что он должен быть, спросите того, кто отвечает за этот сайт.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a> <a rst-btn href="/posts">Назад</a></p>
</div>

422 — не удалось обработать

Предпросмотр
<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>Отправить не удалось</h1>
  <p rst-error-body>Что-то в отправленных данных было неверным. Вернитесь и попробуйте снова; ничего не сохранено.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a> <a rst-btn href="/posts/1/edit">Назад</a></p>
</div>

500 — ошибка сервера

Предпросмотр
<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>На нашей стороне что-то пошло не так</h1>
  <p rst-error-body>Дело не в вас. Проблема зафиксирована. Попробуйте снова чуть позже; если это повторяется, укажите код ниже.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">Код: k3f9tq</p>
</div>

500 — единственный статус со ссылкой: администратор может найти её в логах через grep.

503 — недоступно

Предпросмотр
<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>Мы ненадолго недоступны</h1>
  <p rst-error-body>Сайт обновляется или сильно загружен. Попробуйте снова через минуту.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a></p>
</div>

Всё остальное — общая пара

Предпросмотр
<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>Что-то не так</h1>
  <p rst-error-body>Этот запрос не удалось выполнить. Вернитесь и попробуйте снова.</p>
  <p rst-error-cta><a rst-btn="primary" href="/">Начальная страница</a></p>
</div>

Пять статусов сформулированы в каталоге фреймворка. Шестой откатывается к общей паре, а не показывает читателю имя недостающего ключа.

back-nav

Ссылка на уровень выше, над экраном просмотра или редактирования.

Назад к записи

Предпросмотр
<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

Переключатель языка: меню на details из POST-форм с одним полем на /_locale, чтобы выбор попал в cookie локали, а читатель остался на том же пути.

Двенадцать языков, текущий выделен.

Предпросмотр
<details rst-dropdown rst-locale name="rst-menus">
  <summary>Язык<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru" aria-current="true">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

Этот отправляет POST на /_locale, а для этого нужен сервер. Переключатель в шапке самой страницы — версия только на ссылках.