Оболочка: шапка и нижнее меню
Закреплённые в оболочке шапка и меню видны на всех экранах и не уезжают при переходах.
Шапка и нижняя навигация могут лежать внутри экрана — тогда они прокручиваются вместе с содержимым и живут только на нём. А могут быть закреплены в оболочке: тогда они общие для всех экранов и остаются на месте, когда экран меняется. Второе — то, чего обычно ждут от меню.
Где: Правая кнопка на компоненте → «Закрепить». Там же — «Скрыть на этом экране», если на каком-то экране меню лишнее (например, на приветственном).
Закреплённое видно в полосе экранов — в рамке «На всех экранах» слева от самих экранов: верхние полосы строкой сверху, нижние строкой снизу, как они стоят в приложении. Нажатие выделяет блок, правая кнопка — скрыть на открытом экране или открепить, + в рамке добавляет новую полосу.
Проще всего начать с кнопки «+» в левом углу полосы экранов: она показывает список видов — «Шапка», «Шапка с кнопкой», «Нижнее меню», «Нижнее меню без подписей» и «Пустой контейнер» для своей полосы, отдельно сверху и снизу. Готовый таббар приезжает уже привязанным к первым экранам проекта, а не с мёртвыми вкладками.
Закрепляется не только «Шапка» и «Нижнее меню». Любой блок — контейнер с логотипом и кнопкой, полоса фильтров, карточка с итогом заказа — тоже может стать частью оболочки; у блока верхнего уровня экрана в меню «⋯» над вкладками свойств есть «Закрепить сверху» и «Закрепить снизу». Закреплённый блок показывает булавку в том же ряду — нажатие открепляет. Так собирают свою шапку, когда готовой не хватает.
Закрепление в оболочке — это «видно на всех экранах». Если блок нужен на виду только на своём экране — полоса фильтра над списком, итог заказа над корзиной, — это другое поле: «Остаётся на виду при прокрутке» во вкладке «Раскладка», раздел «Наложение». Блок остаётся на виду, пока экран под ним прокручивается, и уезжает вместе с экраном при переходе. Задайте ему заливку: прозрачный будет просвечивать содержимым, которое проезжает под ним.
«Сверху» и «Снизу» держатся по-разному, и это видно. Сверху блок прилипает на месте: он остаётся в своём ряду и внутри своего блока — чипы, лежащие в контейнере, дальше этого контейнера не поедут, а ниже закреплённых полос встанут сами. Снизу блок уезжает к нижнему краю экрана и стоит там, где бы он ни лежал; ширина у него при этом во весь экран, поэтому заливка и внутренние отступы ему нужны обязательно.
Двум таким полосам на одном экране места хватает: они встают друг под другом. Вторая останавливается ровно под первой, третья — под второй, и высоту при этом никто не считает руками: она берётся с экрана. Складываются только полосы, стоящие выше по экрану, — заголовок группы, прилипающий внутри каждой карточки списка, стопкой не становится и держится края сам.
Закреплённых блоков может быть сколько угодно, и они стоят друг под другом по порядку: шапка, под ней полоса фильтров, под ней ещё что-нибудь. Порядок задают стрелки ↑ и ↓ над вкладками свойств — те же, что переставляют обычный блок среди соседей. Открепление возвращает блок на текущий экран и ничего не удаляет.
Содержимое закреплённого блока переставляется в списке слоёв так же, как на экране: у каждой строки внутри полосы есть держатель слева, и её можно перетащить выше, ниже или в соседний закреплённый блок. Стрелками ↑ и ↓ двигают саму полосу, перетаскиванием — то, что внутри неё.
Пункты меню настраиваются в свойствах: подпись, иконка, экран, куда ведёт. У пункта есть значок с количеством — туда ставят подстановку вроде {{cart.count}}, и пункт «Корзина» показывает число товаров. Пустая строка и ноль значка не рисуют.
У пункта есть и условия показа: «Показывать, когда». Так делают админский раздел, видный только вам — по сравнению {{user.id}} с вашим идентификатором в Telegram.