106 lines
11 KiB
Markdown
106 lines
11 KiB
Markdown
---
|
||
title: Компоненты
|
||
description: Создание переиспользуемых компонентов, экземпляров, наборов компонентов, переопределений и живой синхронизации в OpenPencil.
|
||
---
|
||
|
||
# Компоненты
|
||
|
||
Компоненты — это переиспользуемые элементы дизайна. Отредактируйте основной компонент, и все его экземпляры обновятся автоматически.
|
||
|
||
## Просмотр компонентов
|
||
|
||
Откройте вкладку **Assets** на левой панели, чтобы просматривать локальные компоненты и подключённые библиотеки. Ищите по имени, переключайтесь между сеткой и списком и вставляйте компонент щелчком, клавишей <kbd>Enter</kbd> или перетаскиванием на холст. Загруженные ревизии остаются доступны без сети.
|
||
|
||
## Создание компонента
|
||
|
||
Выделите фрейм или группу и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). Выделение становится многоразовым компонентом.
|
||
|
||
Если выделено несколько узлов, они оборачиваются в новый компонент, позиционированный по их ограничивающей рамке.
|
||
|
||
Компоненты отображаются с фиолетовой меткой и значком ромба над ними.
|
||
|
||
## Наборы компонентов и варианты
|
||
|
||
Выделите два или более компонента и нажмите <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>K</kbd>), чтобы объединить их в набор компонентов — контейнер с пунктирной фиолетовой рамкой и отступом 40 px вокруг дочерних элементов.
|
||
|
||
Варианты поддерживают несколько измерений, например `Размер=Маленький`, `Состояние=Hover` и `Тема=Тёмная`, и не требуют всех возможных комбинаций. Верхний левый вариант используется по умолчанию и как запасной, если после обновления точной комбинации больше нет. В панели свойств можно добавлять, переименовывать, переупорядочивать и удалять измерения и значения; повторяющиеся комбинации отклоняются.
|
||
|
||
## Свойства компонентов
|
||
|
||
Компоненты поддерживают текстовые свойства, логическую видимость и замену экземпляра. Свяжите свойство с полем дочернего узла, а затем изменяйте его значение в экземпляре без отсоединения. Определения и назначения сохраняются в файлах `.fig`.
|
||
|
||
## Библиотеки компонентов
|
||
|
||
Библиотека публикует компоненты как неизменяемую ревизию. Откройте **Assets → Управление библиотеками → Опубликовать библиотеку**, при первой публикации задайте стабильный ID и имя, выберите изменения и опубликуйте. Неотмеченные изменения останутся ожидающими.
|
||
|
||
Подключите библиотеку в разделе **Управление библиотеками**. Её ресурсы появятся рядом с локальными компонентами. Опубликованные определения доступны только для чтения в документе-потребителе, а связанные экземпляры и переопределения остаются редактируемыми.
|
||
|
||
В разделе **Обновления** сравните текущий и новый экземпляры рядом. Можно обновить один экземпляр, все экземпляры одного ресурса, текущую страницу или все страницы. Совместимые свойства сохраняются, а при отсутствии точного варианта запасной вариант показывается до подтверждения. Обновления поддерживают отмену и повтор.
|
||
|
||
Библиотеки могут использовать локальный каталог или настроенного поставщика хранилища. Загруженные ревизии кэшируются. Подключения библиотек и материализованные определения сохраняются в `.fig`, поэтому документ можно открыть без доступа к удалённой библиотеке.
|
||
|
||
## Создание экземпляров
|
||
|
||
Кликните правой кнопкой мыши по компоненту и выберите **Создать экземпляр** в контекстном меню. Экземпляр появляется на 40 px правее исходного компонента, визуально идентичный ему.
|
||
|
||
Создание экземпляров доступно только через контекстное меню — кнопки на панели инструментов нет.
|
||
|
||
## Отсоединение экземпляра
|
||
|
||
Выделите экземпляр и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd>), чтобы отсоединить его. Экземпляр становится обычным фреймом без связи с оригинальным компонентом. Все переопределения сохраняются.
|
||
|
||
## Перейти к основному компоненту
|
||
|
||
Кликните правой кнопкой мыши по экземпляру и выберите **Перейти к основному компоненту**. Редактор переходит к основному компоненту и выделяет его, при необходимости переключая страницу.
|
||
|
||
## Живая синхронизация
|
||
|
||
При редактировании компонента все его экземпляры обновляются автоматически. Синхронизируемые свойства включают:
|
||
|
||
- Ширину и высоту
|
||
- Заливки, обводки и эффекты
|
||
- Прозрачность и скругление углов
|
||
- Свойства раскладки (настройки авто-раскладки)
|
||
- Настройку обрезки содержимого
|
||
|
||
Синхронизация срабатывает автоматически после обновлений узлов, перемещений и изменений размеров внутри компонента.
|
||
|
||
## Переопределения
|
||
|
||
Экземпляры могут переопределять отдельные свойства без разрыва связи синхронизации. Когда свойство переопределено на экземпляре, оно пропускается при синхронизации — остальные свойства продолжают обновляться из основного компонента.
|
||
|
||
### Переопределяемые свойства
|
||
|
||
Переопределения на уровне дочерних элементов поддерживают: имя, текст, размер шрифта, насыщенность шрифта, семейство шрифта, а также все визуальные свойства и свойства раскладки (заливки, обводки, эффекты, прозрачность, скругление углов, размеры).
|
||
|
||
### Новые дочерние элементы
|
||
|
||
Когда вы добавляете дочерний элемент в компонент, все существующие экземпляры автоматически получают клонированную копию. Порядок дочерних элементов в экземплярах всегда соответствует компоненту.
|
||
|
||
## Попадание в объект
|
||
|
||
Компоненты и экземпляры являются непрозрачными контейнерами — клик по дочернему элементу выделяет сам компонент, а не дочерний элемент. **Дважды кликните**, чтобы войти в компонент и выделить элементы внутри него.
|
||
|
||
## Визуальное оформление
|
||
|
||
| Элемент | Внешний вид |
|
||
|---------|-------------|
|
||
| Метка компонента | Фиолетовая с значком ромба, всегда видна |
|
||
| Метка экземпляра | Фиолетовая с значком ромба, всегда видна |
|
||
| Рамка набора компонентов | Пунктирная фиолетовая рамка |
|
||
|
||
## Сочетания клавиш
|
||
|
||
| Действие | Mac | Windows / Linux |
|
||
|----------|-----|-----------------|
|
||
| Создать компонент | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd> |
|
||
| Создать набор компонентов | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>K</kbd> |
|
||
| Отсоединить экземпляр | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd> |
|
||
|
||
## Советы
|
||
|
||
- Редактирование текста внутри экземпляра создаёт переопределение — текст не будет перезаписан при изменении компонента.
|
||
- Используйте наборы компонентов для организации вариантов (например, состояния кнопки Primary/Secondary/Disabled).
|
||
- Дважды кликните внутрь компонента перед редактированием его дочерних элементов — одиночный клик выделяет контейнер компонента.
|
||
- См. [Контекстное меню](./context-menu) для всех действий, связанных с компонентами.
|