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