Вид Zeyt

Приложение открывается внутри Zeyt, и лучше всего оно выглядит, когда его не отличить от остального Zeyt. Для этого есть набор вида: два файла, которые кладут в пакет приложения. В нём цвета, шрифт и элементы самого Zeyt. Тема берётся из Zeyt, и светлая, и тёмная. Текст растёт вместе с системным размером, а касаться всего удобно: каждый элемент не меньше 44 px. Этим набором сделаны приложения Zeyt.

Подключить#

Скачайте pairx-ui.css и pairx-ui.js, положите их рядом с index.html и подключите в <head>:

<link rel="stylesheet" href="pairx-ui.css">
<script src="pairx-ui.js"></script>

Затем, до первого экрана, — PairxUI.start(): он берёт точные цвета открытого Zeyt (ui.theme), отступы (ui.safeArea) и дальше следит за сменой темы.

await PairxUI.start();
render();
pairx.call("app.ready");

Без моста — в обычном браузере или в тесте — набор тоже работает: цвета Zeyt берутся по теме системы.

Страница и текст#

<main class="px-page">
  <h1 class="px-large-title">Крокодил</h1>
  <p class="px-subhead px-muted">Один рисует — остальные угадывают.</p>
</main>

.px-page даёт отступы страницы с учётом краёв экрана. Размеры текста — те же, что в Zeyt: .px-large-title, .px-title, .px-title3, .px-headline, .px-body, .px-subhead, .px-footnote, .px-caption. Задавайте свои размеры в rem, а не в px: так текст растёт с Dynamic Type на iPhone и с размером шрифта на Android. Ещё есть цвета: .px-muted, .px-accent, .px-good, .px-destructive.

Списки#

Как на страницах Zeyt — карточка строк, заголовок над ней и пояснение под ней:

<section class="px-section">
  <h2 class="px-section-header">Партия</h2>
  <div class="px-list">
    <div class="px-row">
      <div class="px-row-main"><p class="px-row-title">Раундов</p></div>
      <span class="px-row-value">8</span>
    </div>
    <label class="px-row">
      <span class="px-row-main"><span class="px-row-title">Подсказки буквами</span></span>
      <input type="checkbox" role="switch" class="px-switch" checked>
    </label>
    <button class="px-row" type="button">
      <span class="px-row-main"><span class="px-row-title">Набор слов</span></span>
      <span class="px-row-value">Обычные</span>
      <span class="px-row-chevron" aria-hidden="true"></span>
    </button>
  </div>
  <p class="px-section-footer">Подсказки открывают буквы слова на 30-й и 45-й секунде.</p>
</section>

Строка-кнопка (button.px-row) подсвечивается при нажатии. .px-row--accent и .px-row--destructive окрашивают её название.

Кнопки#

.px-button — главная, во всю ширину; кнопка называет действие: «Начать игру», «Отправить».
.px-button--tonal — второстепенная, .px-button--plain — текстом, .px-button--destructive — разрушительная.
.px-button--small — маленькая рядом со строкой: 36 px на вид, 44 px для касания.
.px-icon-button — круглая со значком; у неё обязательно aria-label, aria-pressed="true" — выбранный инструмент.

Главное действие экрана удобнее отдать нативной кнопке Zeyt: она стоит над клавиатурой и жестами системы.

Поля и выбор#

.px-field — поле ввода и textarea.
.px-chips с .px-chip[aria-pressed] — категории и фильтры.
.px-segmented с кнопками role="radio" и aria-checked — выбор одного из двух-трёх.
input.px-switch[role="switch"] — выключатель.

Люди#

row.prepend(PairxUI.avatar({ name: "Анна Смирнова", id: member.id, present: true }));

Аватар — инициалы человека на одном из семи цветов Zeyt: у одного человека в приложении всегда один цвет. present ставит зелёную точку, как в «в сети», — для тех, кто сейчас в приложении (context.present, мост 1.2). Несколько аватаров рядом — .px-avatars.

Состояния#

У каждого экрана с данными есть три состояния, а ошибка фонового обновления не стирает уже показанное:

загрузка — .px-spinner или .px-progress;
пусто — .px-empty: значок, заголовок, пояснение и одна главная кнопка;
ошибка — строка с понятным текстом и кнопкой «Повторить».

Лист#

<dialog class="px-sheet" id="rules">
  <div class="px-sheet-grabber" aria-hidden="true"></div>
  <h2 class="px-title3">Правила</h2>
  …
</dialog>

const rules = PairxUI.sheet(document.getElementById("rules"));
rules.open();

Лист открывается снизу; нажатие на затемнение его закрывает.

Что ещё в pairx-ui.js#

PairxUI.onTheme(callback) — тема сменилась: например, перерисовать холст.
PairxUI.initials(name) — одна-две буквы имени.
PairxUI.plural(n, "игрок", "игрока", "игроков") — слово для числа.

Под капотом#

Шрифт. На Android Zeyt отдаёт приложениям свой шрифт Inter с их же адреса, /_pairx/fonts/. На iPhone — системный, как в самом Zeyt. Пути под /_pairx/ принадлежат Zeyt: файлы приложения с такими путями не откроются.
Размер текста. На Android приложение получает размер шрифта телефона так же, как Chrome: растут буквы, а длины в rem — нет. Поэтому круги аватаров и круглые кнопки набор растит сам — по переменной --px-zoom.
Цвета — переменные --px-background, --px-surface, --px-text, --px-muted, --px-line, --px-accent, --px-accent-fill, --px-good, --px-destructive. Используйте их в своих стилях, а не свои цвета, — тогда приложение сменит тему вместе с Zeyt.