Аккордеон

Аккордеон (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 мс.

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

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

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

Клик по Item #1 в настройках

На Холсте выбран элемент Accordion Item 1

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

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

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