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