Текст, картинки, иконки

Заголовок, абзац, подпись, бейдж; изображение с пропорциями и кадрированием; аватар, карусель, аудио, видео, QR.

Текстовые блоки: Заголовок (шесть уровней), Абзац, Подпись, Бейдж и Чип. Править текст можно прямо на холсте двойным щелчком, на телефоне — вторым нажатием по выбранной надписи.

Абзац и подпись различаются не устройством, а ролью: абзац — основной текст, крупнее и темнее, и его поле в панели — область в несколько строк, где перенос строки набирается прямо в ней (на холсте — клавишей Enter внутри абзаца). Подпись — мелкая приглушённая строка под чем-то: дата, единица измерения, пояснение. Поэтому описание в три абзаца — это один «Абзац» с переносами, а не три «Подписи» подряд. Размер, насыщенность и цвет у обоих настраиваются на вкладке «Вид», так что при желании они сходятся в одно.

Изображение берётся загрузкой или ссылкой. Пропорции задаются отдельным свойством (в том числе своим, вида 7:5), а «Что беречь при обрезке» решает, какой край картинки важнее, когда её кадрируют. Заполните «Описание для незрячих» — это единственное, что услышит человек с экранным диктором.

Отдельный пункт в «Пропорциях» — «Заполнить»: у картинки нет своей формы, высоту ей даёт то, рядом с чем она стоит. Так собирается карточка афиши — постер слева, описание справа: постер становится ровно такой высоты, какой описание, и обрезается по краям, а не оставляет под собой пустоту. Контейнеры вокруг картинки растягиваются вместе с ней сами — заворачивать постер в свой блок шириной 40 % можно и ничего больше не настраивать. Высоты вокруг нет вовсе (картинка лежит одна) — блок остаётся в 160 точек, чтобы не схлопнуться в ноль.

• Аватар — круглая картинка или инициалы. Часто с подстановкой {{user.photo}}, а в поле инициалов — {{user.name}}. Фотографию присылает мессенджер в параметрах запуска, и присылает не всякий клиент: одно и то же приложение у одного и того же человека показывало фотографию в Telegram на компьютере и инициалы на телефоне. Поэтому у приложения есть второй путь — оно спрашивает фотографию у бота владельца, и она появляется там, где мессенджер её не прислал. Не появится, если человек закрыл фото настройками приватности или не поставил его вовсе: тогда рисуются инициалы, и это решение самого человека, а не сбой.
• Карусель — полоса слайдов с листанием вбок. Адреса перечисляются в одном поле через запятую, и в одной строке можно смешивать картинки с видео: ссылка на mp4 или на страницу VK Видео, Rutube, Дзена и YouTube показывается проигрывателем, всё остальное — картинкой. Адрес может быть подстановкой ({{объект.фото}}), поэтому полоса собирается из столбца таблицы. Пропорции — те же, что у картинки, вплоть до своей записи вроде 7:5. «Ширина слайда» в процентах говорит, сколько видно за раз: 80% оставляют край следующего, 100% дают обложку во весь экран, и тогда о продолжении говорят точки под полосой.
• Аудио — плеер с обложкой, названием и исполнителем.
• Видео — прямая ссылка на файл (mp4, webm) или адрес страницы с VK Видео, Rutube, Дзена или YouTube: вставьте его из адресной строки как есть. У файла плеер свой — с автозапуском без звука, обложкой и кнопкой скорости: нажатие на «1×» в панели перебирает 1,25×, 1,5×, 1,75× и 2×, и выбранная скорость остаётся на следующем уроке. У хостинга открывается его собственный плеер, поэтому оформление, скорость и кнопка «во весь экран» там тоже его.
• QR-код — рисуется в приложении из того, что вы в него положили: номер брони, ссылка, код лояльности. Значение можно подставить.
• Иконка — из встроенного набора; свою тоже можно загрузить (SVG или PNG, хоть паком).

Своя иконка и цвет. Загруженная иконка по умолчанию рисуется картинкой — как нарисована, так и стоит, и свойство «Цвет» её не трогает. Включите под ней переключатель «Красить цветом свойства» — и от файла останется только форма, а цвет будет из свойства: тот же значок станет белым в шапке, серым в неактивном пункте меню и акцентным в активном. Цвет самого файла тогда не важен вовсе — важна прозрачность вокруг рисунка, так что белую иконку загружать можно. Выключайте переключатель для разноцветных значков — эмодзи-пака, логотипа: их красить одним цветом нельзя.