57 lines
5 KiB
Markdown
57 lines
5 KiB
Markdown
---
|
||
title: Переменные
|
||
description: Дизайн-переменные, коллекции, режимы и привязка заливок в OpenPencil.
|
||
---
|
||
|
||
# Переменные
|
||
|
||
Переменные хранят переиспользуемые дизайн-токены — цвета, значения отступов и другие свойства, которые можно привязывать к узлам. Измените значение переменной, и каждый использующий её узел обновится.
|
||
|
||
## Открытие диалога переменных
|
||
|
||
Когда узлы не выделены, вкладка «Дизайн» показывает свойства уровня страницы, включая раздел «Переменные» с количеством коллекций и переменных. Нажмите значок настроек, чтобы открыть диалог переменных.
|
||
|
||
## Коллекции
|
||
|
||
Переменные организованы в коллекции. Каждая коллекция отображается как вкладка в диалоге.
|
||
|
||
- **Переключение коллекции** — кликните по вкладке
|
||
- **Переименование коллекции** — дважды кликните по названию вкладки
|
||
|
||
## Режимы
|
||
|
||
У каждой коллекции может быть несколько режимов (например, Светлая и Тёмная тема). Режимы отображаются как столбцы в таблице переменных. Переменная имеет значение для каждого режима.
|
||
|
||
### Добавление коллекций и режимов
|
||
|
||
Создайте новую коллекцию через панель инструментов диалога. Добавляйте режимы к существующей коллекции для поддержки вариантов тем или адаптивных контрольных точек.
|
||
|
||
## Управление переменными
|
||
|
||
Таблица переменных использует столбцы с изменяемой шириной: «Имя» и по одному столбцу на каждый режим.
|
||
|
||
- **Создать переменную** — нажмите кнопку «+ Создать переменную»
|
||
- **Редактировать имя** — кликните по ячейке с именем переменной для встроенного редактирования
|
||
- **Редактировать значение** — кликните по любой ячейке значения, чтобы изменить его для данного режима
|
||
- **Поиск** — введите текст в строку поиска для фильтрации переменных по имени
|
||
|
||
### Цветовые переменные
|
||
|
||
Цветовые переменные отображают встроенное поле ввода цвета с палитрой. Кликните по образцу, чтобы открыть палитру и выбрать новый цвет.
|
||
|
||
## Привязка переменных к заливкам
|
||
|
||
В разделе «Заливка» панели свойств используйте выбор переменных, чтобы привязать цветовую переменную к заливке узла.
|
||
|
||
- **Привязать** — выберите цветовую переменную из списка. Заливка отображает фиолетовый бейдж с именем переменной.
|
||
- **Отсоединить** — нажмите кнопку отсоединения на бейдже, чтобы удалить привязку. Заливка возвращается к разрешённому значению цвета.
|
||
|
||
Когда значение переменной изменяется (или при переключении режимов), все привязанные заливки обновляются автоматически.
|
||
|
||
## Советы
|
||
|
||
- Используйте коллекции для группировки связанных токенов (например, «Примитивы» для базовых цветов, «Семантические» для ролевых алиасов, «Отступы» для значений раскладки).
|
||
- Режимы полезны для переключения тем — определите значения для светлого и тёмного режимов в одной коллекции.
|
||
- Переменные поддерживают алиасы — коллекция «Семантические» может ссылаться на значения из коллекции «Примитивы».
|
||
- См. [Рисование фигур](./drawing-shapes) для информации о заливках и палитре цветов.
|