Аккордеон

Аккордеон (Accordion) — виджет со списком элементов, каждый из которых можно раскрыть или свернуть. Он используется, как и Вкладки, для группировки контента. В отличие от Вкладок, в Аккордеоне одновременно может быть развернуто несколько элементов.

Настройки Аккордеона

На вкладке Настройки (Settings) правой панели можно управлять содержимым и работой виджета.

Основные настройки

Элемент, открытый по умолчанию

Вы можете выбрать, будет ли какой-либо элемент Аккордеона открыт по умолчанию при загрузке страницы (Open by default). Изначально эта опция отключена, и при открытии все элементы будут свернуты.

При включении опции вы сможете выбрать в списке элементов (Accordion Items), какой элемент будет открыт.

Открытие нескольких элементов одновременно

Вы можете выбрать, могут ли несколько элементов одновременно находиться в раскрытом состоянии. По умолчанию может быть открыт только один элемент (Allow opening one at a time).

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

Если в этом случае также выбрана опция открытия по умолчанию (Open by default), то в списке элементов можно будет выбрать элементы, которые будут открыты при загрузке страницы. Можно сделать открытыми один, несколько или все элементы.

Событие для перехода

В настройках вы можете выбрать действие, в результате которого будет происходить раскрытие элементов Аккордеона, — Переход (Transition event). По умолчанию это При клике (Click), можно также выбрать При наведении (Hover).

Управление элементами Аккордеона

Вы можете управлять элементами Аккордеона:

• добавить элемент, нажав на «+»

• удалить элемент, нажав на «-»

• скопировать элемент, нажав на иконку копирования

• переместить элемент, зажав иконку с тремя полосками слева от названия элемента

Структура элементов Аккордеона

Все элементы Аккордеона по умолчанию имеют одинаковую структуру и стили.

Каждый Элемент Аккордеона (Accordion Item) состоит из:

• Названия элемента (Accordion Title)
• Контента элемента (Accordion Content)

В Названия и Контент элементов можно добавить любые элементы и виджеты. Например, вы можете добавить изображение в Название элемента. Это может быть иконка в формате svg. При этом иконка будет добавлена и ко всем остальным Названиям элементов.

Для Аккордеона существует настройка — Применить независимую структуру. Она позволяет сделать структуру его элементов независимой друг от друга. То есть в каждом элементе могут быть различные элементы и виджеты, с различными стилями.

Анимация

Вы можете настроить анимацию при раскрытии/свертывании элементов Аккордеона.

Настройки анимации (Animation) имеют следующие параметры:

• Эффекта (Effect) — определяет эффект открытия вкладки

  • Нет (None)

  • Растворение (Fade) (по умолчанию)

  • Скользящий горизонтально (Slide Horizontal)

  • Скользящий вертикально (Slide Vertical)

• Плавность анимации и ее длительность при открытии и закрытии (Open/Close)

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

  

  • Длительность анимации (в миллисекундах). Вы можете выбрать из выпадающего списка время анимации от 0 до 2000 мс. По умолчанию значение составляет 200 мс.

Редактирование контента элементов Аккордеона

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

При этом элемент будет раскрыт, и вы сможете отредактировать его контент на холсте.

Вы также можете открыть определенный элемент, выбрав соответствующий Accordion Item на холсте или в слоях, а затем в Настройках переключив UI состояние на Открыт.

Стили Аккордеона

Вы можете стилизовать виджет Аккордеон с помощью вкладки Дизайн правой панели. Можно стилизовать как весь виджет, так и отдельно его элементы. Например, можно установить границы для всего виджета, а также внутренние отступы для Названия и Контента, изменить размер шрифта и цвет фона Названия.

Как стилизовать элемент Аккордеона в открытом состоянии — Стили дополнительных состояний: Аккордеон.