Стиль

Тут ви міняєте вигляд окремого віджета: колір, текстовий стиль, відступи, розмір, тло, рамку, заокруглення й тінь — і робите так, щоб вигляд залежав від даних.

Розділ «Стиль»#

Виділіть віджет і прогорніть панель Властивості до розділу Стиль. Він однаковий для кожного віджета й поділений на групи: Текст, Розмір, Внутрішні відступи, Зовнішні відступи, Тло, Рамка, Заокруглення, Тінь, Прозорість, Скло. Група, у якій уже є значення, позначена словом задано.

Поле, якого не задано, не застосовується: прихованих значень, крім вбудованого вигляду, віджет не має.

Токен або власне значення#

Майже кожне поле спершу пропонує значення теми — токени: primary, md, lg тощо. Останнім стоїть пункт Власне значення…

Токен іде за темою. Зміниться фірмовий колір — зміняться й усі віджети, що на нього посилаються, і колір буде правильний і у світлій, і в темній темі.
Власне значення — число чи колір, уведені руками. З ребрендингом воно не рухається й однакове в кожній темі.

Віддавайте перевагу токенам. Унизу панелі розділ Відхилення від дизайн-системи перелічує власні значення віджета — видно, наскільки він відійшов від теми.

Якщо власне значення виявилося вдалим і знадобиться ще, зробіть із нього токен: у тому самому розділі під значенням натисніть Зберегти в тему як…, введіть Ім’я токена й натисніть Зберегти. Значення стане токеном теми, а віджет посилатиметься на нього. Кнопку бачить лише той, хто має право публікувати, і лише для кольору, відступу чи проміжку, заокруглення, шрифту, градієнта й тіні.

Що варто знати:

Колір — токен, токен із прозорістю або власний колір шістьма шістнадцятковими цифрами, як-от #ff7a59.
Відступи й заокруглення — одне значення на всі сторони або окремі: перемикачі Усі сторони / По сторонах та Усі кути / По кутах. Сторони звуться Початок рядка і Кінець рядка, а не «ліворуч» і «праворуч», — тому в мовах із письмом справа наліво розкладка віддзеркалюється правильно.
Розміри — у dp, точках, якими міряє телефон. Ширина, dp і Висота, dp задають точний розмір, поля найменшого й найбільшого — межі.
Тло — Немає, колір, градієнт або зображення.
Текстовий стиль — стиль теми; під ним можна уточнити кегль, вагу, висоту рядка й міжлітерний проміжок лише для цього віджета.

Примітка під полем каже, що налаштування робить саме на цьому віджеті — наприклад, що колір, заданий контейнеру, фарбує тексти й іконки всередині.

Нахил і лінія#

Текст має ще два налаштування у групі Текст: Нахил (Прямий або Курсив) і Лінія (Без лінії, Підкреслений або Закреслений). Як успадковано бере значення в найближчого контейнера, який його задає.

Як дати власний стиль частині речення — жирну суму всередині рядка — див. Текст зі значеннями.

Стани#

Стан міняє стиль, коли справджується умова на даних: заблокована картка сіра, виконане завдання зелене. Ви тримаєте один віджет замість трьох копій.

У розділі Стани натисніть Додати стан.
Оберіть поле даних і умову — як для видимості.
Задайте поля стилю, які в цьому стані інакші. Стан зберігається, щойно в ньому названо хоч одне поле.

Діє перший стан, чия умова справдилася, і він накладається на базовий стиль: поля, яких стан не називає, лишаються базовими.

Скло#

Група Скло розмиває те, що лежить під віджетом, — точки тла, малюнок, екран за карткою. Задайте Розмиття тла, px (від 1 до 40) і дайте віджету напівпрозоре тло: разом вони дають матове скло. Розмиття тримається кутів віджета, а сам віджет і його вміст лишаються чіткими. Порожнє поле прибирає розмиття.

Рух#

Розділ Рух унизу панелі будь-якого віджета змушує його рухатися, не зсуваючи нічого довкола, — точку, що пливе на тлі, кнопку, що дихає.

Плавання — віджет відпливає від свого місця й повертається. Напрямок — Угору й униз, Убік або Вісімкою; Відстань, px — як далеко.
Дихання — віджет більшає й меншає. Масштаб на вершині — його розмір на вершині циклу (1 — розмір не змінюється); Прозорість на вершині, якщо задана, ще й приглушує його.
Цикл, мс — один повний цикл; Затримка, мс тримає віджет нерухомим перед першим циклом — дайте кільком точкам різні затримки, і вони рухатимуться не в унісон.
Без руху прибирає рух.

Полотно стоїть, щоб на ньому зручно було складати екран; віджет із рухом позначено маленькою хвилькою. Рух грає в прев’ю, у прототипі й у застосунку. Щоб побачити його й на полотні, відкрийте Показати над телефоном і ввімкніть Рух на полотні. На телефоні з увімкненим Зменшити рух віджет стоїть.

Стиль за шириною екрана#

Коли перемикач Редагую для угорі панелі стоїть на Планшет чи Десктоп, змінений стиль зберігається лише для цієї ширини. Див. Ширина екрана.

Далі#

Тема — звідки беруться токени.