Аккордеон

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

При клике по названию вкладки происходит переключение на соответствующий элемент на Холсте.

Далее вы можете редактировать контент выбранного элемента на Холсте.

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