Оформление одного элемента

Вкладка «Вид»: цвета, текст, рамка, скругление, тень, прозрачность.

Всё оформление выделенного компонента — на вкладке «Вид» справа: фон и цвет текста, шрифт, размер и насыщенность, выравнивание, высота строки и разрядка, регистр (ПРОПИСНЫЕ, строчные, С Заглавной), наклон и подчёркивание, рамка с толщиной, цветом и сторонами, скругление (можно по каждому углу отдельно), тень, прозрачность и размытие.

• Шрифт в «Типографике» относится к этой надписи, а не ко всему приложению: пустое поле — как в «Стилях проекта». Так вывеска в шапке набирается своим шрифтом, а остальной текст остаётся прежним. У контейнера, раздела и карточки шрифт достаётся и содержимому.
• Регистр — это оформление, а не правка текста: строка, приехавшая подстановкой из таблицы, показывается ПРОПИСНЫМИ, а в таблице остаётся как была.
• Стороны рамки — четыре переключателя под цветом рамки (В, П, Н, Л), они появляются, как только у рамки есть толщина. Так делается разделительная линия под строкой списка: толщина 1, снять верх, право и лево — останется только низ.
• Рамка у кнопки, чипа, бейджа и кнопки-значка рисуется по краю их самих, а не вокруг блока: цвет и толщина отсюда перекрашивают ту самую обводку, которую даёт вид «С обводкой». Поставьте кнопке вид «С обводкой» и здесь же выберите цвет рамки — линия станет вашей, а толщина останется прежней, пока вы её не поменяли.
• Прозрачность бывает двух родов, и путают их постоянно. Ползунок «Прозрачность» в «Эффектах» гасит блок вместе с содержимым: поставьте 35 % контейнеру — побледнеют и кнопки внутри, они станут выглядеть так, будто ушли под него. Если нужна полупрозрачная подложка с резкими надписями поверх — прозрачность задаётся в самом цвете: откройте «Фон», и под палитрой стоит ползунок «Прозрачность цвета». Матовое стекло — это он плюс «Размытие подложки» («Эффекты» → «Ещё»).
• «Что поверх чего» — в «Раскладке», раздел «Слои и прокрутка», под крышкой «Ещё». Больше значит выше; нужно, когда блоки надвинуты друг на друга отрицательным отступом. Содержимое блока и так всегда рисуется поверх него, вложенный контейнер — поверх внешнего: поле нужно только для соседей, и сравниваются именно соседи внутри одного блока. Поэтому «поднять содержимое над другим блоком» значит поднять сам блок, а «ниже соседа» задаётся порядком слоёв — стрелками ↑ и ↓ над вкладками свойств, а не отрицательным числом.
• «Поверх соседей» — там же, в «Слоях и прокрутке», под той же крышкой «Ещё». Блок выходит из ряда: соседи смыкаются, будто его нет, а он ложится поверх них ровно там, где стоял. Это ответ на «надвинул кнопку отрицательным отступом, а вместе с ней поехал и соседний блок»: у снятого с ряда блока отступы двигают его одного. Место ему по-прежнему выбирает раскладка — координат от угла набирать не надо; кто выше, если так стоят двое, решает поле «Что поверх чего» рядом.
• Пустое поле «Скругление» — это не ноль. Пока в нём ничего не стоит, блок скругляется так, как задумал сам виджет: у уведомления, поля ввода, карточки и кнопки своё умолчание — поэтому в поле и написано «по умолчанию». Нужен прямой угол — введите 0; вернуть умолчание можно, очистив поле.
• Размытие в «Эффектах», под крышкой «Ещё», — два разных ползунка. «Размытие» мутит сам блок вместе с надписями внутри — так делают задник. «Размытие подложки» оставляет содержимое резким и мутит то, что за блоком: полупрозрачная шапка поверх афиши. Второму нужен полупрозрачный фон — со сплошной заливкой размывать нечего.
• У «Фильтра кнопками» размытие своё, отдельно от полосы. Задув в «Эффектах» принадлежит блоку, то есть подложке под пилюлями, а сами пилюли лежат поверх неё — им он не достаётся. Поэтому в свойствах полосы, в разделе «Как выглядят метки», рядом с отступами и скруглением стоит «Размытие подложки чипа». Прозрачная полоса плюс размытая пилюля — это как раз тот вид, что у полос в самом Telegram.
• Пилюля отвечает на палец там же, в «Как выглядят метки». «Цвет метки при нажатии», «Цвет текста при нажатии» и «Цвет рамки при нажатии» — это то, что видно, пока палец на пилюле, а «Отклик чипа на нажатие» добавляет к цвету лёгкое сжатие. По умолчанию сжатия нет и цвета пусты: полоса выглядит так, как выглядела. Заполнить их стоит там, где список под полосой перерисовывается не мгновенно, — иначе между нажатием и ответом экран молчит.
• У закреплённого блока прозрачная заливка означает «содержимое едет под ним». Такая полоса ложится поверх прокрутки — иначе показывать ей было бы нечего: под блоком в обычном потоке один сплошной фон приложения. Размытие подложки для этого не обязательно, достаточно самой прозрачности. Соседние закреплённые блоки при этом остаются со своим фоном: просвечивает только тот, кому вы это задали. Порядок в верхней полосе — сверху вниз: первый блок лежит поверх следующих, поэтому его тень видно на них, а не наоборот.
• Ничего не выделено — вкладка «Вид» показывает сам экран: его фон, отступы и шрифт. Нажатие по пустому месту холста как раз снимает выделение, так что попасть туда можно случайно — это не поломка.
• Правая кнопка → «Копировать оформление» и «Вставить оформление» переносят вид с одного элемента на другой, не трогая содержимое.
• Если у компонента много настроек, наверху панели есть поиск (⌘⇧F) — набирайте «тень», «отступ», «скругление».
• «Вернуть оформление по умолчанию» откатывает вид, не трогая тексты и логику.
• У шапки «Размер» и «Насыщенность» меняют название, а «Цвет текста» красит заодно значки — стрелку «назад» и правую кнопку. Оставьте цвет пустым, и значки останутся своих обычных цветов.
• Наверху вкладки — «Стиль»: оформление можно сохранить под именем и назначить другим компонентам, чтобы менять их вид разом. Кнопка со «ползунками» рядом показывает все стили проекта: сколько компонентов на каждом стоит и как его удалить. Удаление стиль убирает, а оформление у компонентов остаётся — становится своим.

Заливка бывает и градиентом: во вкладке «Вид», под цветом фона — «Градиент», линейный или радиальный, два цвета и направление в градусах (180° — сверху вниз, 90° — слева направо). Каждый из двух цветов — обычное поле цвета, то есть умеет пару «светлая тема / тёмная» и подстановку. Градиент ложится поверх заливки и под картинку в фоне: полупрозрачный чёрный поверх фотографии — тот самый приём, которым подпись делают читаемой.

В фон можно положить картинку — у «Контейнера», «Раздела» и «Карточки», на вкладке «Содержимое». Загруженный файл или подстановка: {{item.image}} внутри списка даёт свою обложку каждой карточке, а не одну на все. Рядом — «Как вписывать фон» (обрезать по краям или вписать целиком) и «Что беречь при обрезке», как у блока «Картинка». Пустое поле — фона нет: строка без обложки не покажет чужую. Блоку, внутри которого ничего нет, картинка в фоне сама даёт высоту в 160 точек — иначе он остаётся высотой в ноль, и фон честно рисуется в пустоте. Задали высоту сами — работает ваша.

В любое поле цвета можно вписать подстановку: {{userColor}} в заливке — это цвет, который выбрал сам посетитель, а не заданный вами. Собирается так же, как любой выбор варианта: кнопки-палитры действием «Запомнить» запоминают цвет под именем userColor (а если его сохранять в таблицу посетителей — выбор переживёт закрытие приложения), а остальные элементы красятся тем же {{userColor}}. У пары «светлая / тёмная» подстановка ставится в каждую половину отдельно: под одним именем запоминается один цвет, а не пара.