Компоненты

Компоненты (Components) — это одинаковые по своей структуре или дизайну элементы, которые используются в разных частях проекта. Во всех экземплярах Компонента одинаковое наполнение. Например, одинаковые изображения или текст.

Изменения стилей и наполнения Компонента автоматически применяется ко всем его экземплярам.

Например, компоненты можно использовать для:

  • кнопок;
  • меню;
  • футера;
  • блока с иконками социальных сетей.

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

Создание Компонента

Чтобы создать Компонент, выполните следующие действия:

  1. Выделите на Холсте слой — элемент или группу элементов, которые хотите добавить в компоненты.

  2. Нажмите кнопку Создать Компонент (Create component) на Верхней панели.

Создать компонент из элемента

Созданный компонент будет помечен фиолетовой обводкой и меткой.

Компонент создан

Компонентом можно сделать любой элемент или группу элементов, кроме элемента Root и элементов Списка и Блоклиста.

Созданные компоненты отображаются на вкладке Компоненты.

Вкладка Компоненты

Кликнув на Компонент правой кнопкой мыши, вы можете:

  • переименовать Компонент;
  • удалить Компонент.

Действия с компонентом

Добавление экземпляров Компонента

Вы можете добавлять на Холст любое количество экземпляров Компонента. Для этого выберите нужный Компонент на вкладке Компоненты и кликните по нему или перетащите его на Холст. Экземпляры компонента также будут помечены фиолетовой обводкой и меткой.

На вкладке Слои (Layers) Компонент и его экземпляры также отображаются фиолетовым цветом и помечены иконкой компонента.

Компоненты на вкладке Слои

Вы можете отвязать элемент от Компонента, кликнув по нему правой кнопкой мыши на вкладке Слои и выбрав из меню Отвязать компонент (Detach component). В этом случае вы можете редактировать его контент и стили независимо от компонента.

Отвязывание компонента от элемента