Выбор варианта: подсветить нажатое

Нажатие запоминает выбор, а запомненное подсвечивает выбранное — мастера, дату, время, категорию места.

Метка выбора и её логика: действие «Запомнить».
Метка выбора и её логика: действие «Запомнить».

Выбор из нескольких вариантов собирается из двух половин, и обе нужны. Первая — действие «Запомнить»: нажатие запоминает ответ этого варианта. Вторая — подсветка: у кнопки и у карточки есть пара свойств «Подсвечивать, когда» и «равно значению». В первое ставится запомненное ({{slotTime}}), во второе — ответ этого самого варианта (11:00). Совпали — вариант горит.

  1. Заведите имя в памяти — например slotTime — на вкладке «Данные» → «Память приложения».
  2. На каждой кнопке варианта: действие «Запомнить», в «Что запомнить» — slotTime, значение — время этой кнопки.
  3. Там же в свойствах: «Подсвечивать, когда» = {{slotTime}}, «равно значению» = то же время.
  4. Выбранное пригодится дальше: подставьте {{slotTime}} в подпись, в заявку владельцу («Добавить к заявке») или в строку списка.

Карточка подсвечивается акцентной рамкой и заливкой поверх своего оформления, кнопка становится сплошной, остальные — мягкими. Полоса чипов-фильтров делает то же самое одним блоком — она для сужения списка, а эта пара — для всего остального: фотографий мастеров, плиток с датами, строк с категориями мест.

Цвет подсветки у кнопки задаётся там же, в её свойствах: «Заливка подсвеченной» и «Текст подсвеченной», а рядом — «Заливка при нажатии», «Текст при нажатии» и «Рамка при нажатии», то есть то, что видно, пока палец на кнопке. Рамка появляется и у кнопки, которой рамки не задавали, — линией в точку; у кнопки со своей рамкой цвет нажатия её просто перекрашивает, толщина остаётся прежней. Пусто в любом из них означает «как в теме» — кнопка выглядит ровно так, как выглядела. Как и везде, каждый цвет можно задать парой «для светлой темы / для тёмной». Рядом стоит «Отклик на нажатие»: по умолчанию кнопка чуть сжимается под пальцем, а «только цвет» это сжатие убирает — у кнопки во всю ширину карточки заливка, отходящая от краёв, читается не как отклик, а как дрожание вёрстки.

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

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

Поп-ап — свои блоки поверх экрана. Он лежит на экране обычным блоком (на холсте — с подписью «Поп-ап»), внутрь кладётся что угодно: список ссылок, переключатель темы, форма. Посетителю он не виден, пока его не показали действием «Показать поп-ап» с любой кнопки, строки или картинки. Свойство «Как показывать» решает, чем он будет: шторкой снизу, окном или панелью с края на заданную долю экрана — из этого и собирается всё сразу, от меню-бургера до списка по нажатию на аватарку. У окна место на экране задают «Где по горизонтали» и «Где по вертикали»: по умолчанию оно посередине, а «справа» и «сверху» превращают его во всплывающий список под кнопкой в шапке. Закрывается нажатием мимо, кнопкой «Назад» и действием «Закрыть поп-ап»; переход на другой экран закрывает его сам.

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

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

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

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

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

Читать дальше