Интерфейс

Pairx рисует вокруг приложения свою шапку: название, пометку «Код пользователя · автор», «Закрыть» и меню (код приложения, жалоба, удаление своих данных). Всё остальное — страница приложения. Чтобы она выглядела частью Pairx, у моста есть нативные элементы.

Заставка и app.ready#

Пока страница загружается, Pairx показывает заставку со значком и названием. Вызовите app.ready, как только нарисован первый экран, — заставка уйдёт:

await load();                 // снимок, первый рендер
pairx.call("app.ready");

Если приложение не вызвало app.ready, заставка уходит сама после загрузки страницы.

Главная кнопка#

Нативная кнопка Pairx внизу экрана: та же, что в остальном Pairx, над клавиатурой и с учётом жестов системы. Подходит для главного действия экрана — «Отправить», «Встать в очередь», «Проголосовать».

await pairx.call("ui.mainButton", { text: "Проголосовать", visible: true });
pairx.on("ui.mainButton.clicked", async () => {
  pairx.call("ui.mainButton", { progress: true });     // индикатор вместо надписи
  try { await vote(); }
  finally { pairx.call("ui.mainButton", { visible: false }); }
});

Параметры, которые не переданы, остаются прежними: { progress: true } не меняет надпись. Пустой text или visible: false прячет кнопку.

«Назад»#

Если в приложении несколько экранов, покажите «Назад» в шапке Pairx вместо «Закрыть»:

function openDetails() {
  showScreen("details");
  pairx.call("ui.backButton", { visible: true });
}
pairx.on("ui.backButton.clicked", () => {
  showScreen("list");
  pairx.call("ui.backButton", { visible: false });
});

Системный жест «назад» на Android следует за этой кнопкой: пока она показана, жест приходит тем же событием, а не закрывает приложение.

Окна и подсказки#

const choice = await pairx.call("ui.popup", {
  message: "Удалить запись?",
  buttons: [{ id: "cancel", text: "Отмена", type: "cancel" }, { id: "delete", text: "Удалить", type: "destructive" }],
});
if (choice === "delete") remove();

pairx.call("ui.toast", { text: "Скопировано" });

Заголовок окна Pairx пишет сам: «Название · код пользователя». Так окно приложения нельзя принять за окно Pairx — и поэтому в тексте не стоит просить пароли и коды: люди знают, что Pairx так не делает.

Тема#

CSS prefers-color-scheme в приложении следует теме Pairx, а не системы. Поддержите обе:

:root { color-scheme: light dark; --bg: #f5f6f8; --text: #1b1e24; }
@media (prefers-color-scheme: dark) { :root { --bg: #101113; --text: #f3f4f7; } }

Точные цвета Pairx отдаёт ui.theme, а при смене темы на открытом приложении приходит событие theme.changed:

function apply({ colors }) {
  for (const [name, value] of Object.entries(colors)) document.documentElement.style.setProperty(`--pairx-${name}`, value);
}
apply(await pairx.call("ui.theme"));
pairx.on("theme.changed", apply);

Отступы#

ui.safeArea отдаёт отступы, которые нужно оставить у краёв. Шапку и главную кнопку Pairx рисует вне страницы, их место уже учтено: снизу отступ нужен, только пока главная кнопка скрыта.

Вёрстка#

• Ширина от 320 px, высота — весь экран под шапкой Pairx.
• Размер текста не меньше 15 px, области нажатия — не меньше 44 × 44 px.
• Системный шрифт: -apple-system, system-ui, sans-serif.
• <meta name="viewport" content="width=device-width, initial-scale=1"> обязателен, иначе страница уменьшится.

Копирование#

clipboard.writeText копирует текст до 10 000 символов — только в ответ на нажатие человека:

copyButton.onclick = async () => {
  await pairx.call("clipboard.writeText", { text: code });
  pairx.call("ui.toast", { text: "Скопировано" });
};