Справка · Продвинутые разделы

Переменные: общий цвет, размер или шрифт

Свяжите несколько элементов с одним значением, чтобы менять их вместе. Например, один цвет «Акцент» может управлять заливкой всех выбранных кнопок на странице.

Цветовой образец связан с двумя одинаково окрашенными кнопками. — Где это находится

Один цвет для двух кнопок

В продвинутом режиме выберите одну кнопку. В панели свойств раскройте «Переменные и токены».
Для базового значения нажмите значок компьютера в верхней панели; в «Переменных и токенах» выберите тему light и бренд default. Нажмите «Цвет», введите имя «Акцент» и нажмите «Создать».
В карточке новой переменной нажмите на цвет и задайте нужное значение.
В разделе «Bindings выбранного слоя» найдите Background и выберите «Акцент» в списке. Это привяжет фон выбранной кнопки.
Выберите вторую кнопку и повторите привязку Background к той же переменной.
Измените цвет «Акцент» в карточке переменной. Обе привязанные кнопки изменятся вместе; остальные элементы останутся прежними.

Какие свойства можно связать

«Цвет» подходит для Background — фона, Text — цвета текста и Border — цвета обводки.
«Число» подходит для Radius — скругления и Font size — размера шрифта.
«Шрифт» подходит для Font family — семейства шрифта.
В каждом списке показываются переменные подходящего типа. Чтобы снять связь у одного свойства, выберите «— literal». Затем задайте обычное значение в соответствующем разделе свойств.

Тема, бренд и устройство

Переключатели «Тема» и «Бренд» относятся к значениям переменных страницы. Они не переключают светлую и тёмную тему интерфейса Pageo и не добавляют посетителю кнопку выбора темы.

Переключите «Тема» с light на dark и задайте другое значение «Акцент». Вернитесь в light: у этой темы сохранено своё значение.
Для ещё одного оформления нажмите «Добавить вариант бренда», введите имя латиницей, например summer, и нажмите «Создать». Новый вариант станет активным; задайте нужные значения.
Проверяйте текущий режим перед изменением: значение может относиться к Desktop, Tablet или Mobile и к выбранным теме и бренду. Если отдельного значения нет, используется унаследованное.

Если значение не редактируется

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

Начните с нескольких понятных переменных: «Акцент», «Текст», «Скругление карточки». Переменные и их связи относятся к текущей странице; одинаковые имена на разных страницах не создают общую связь.