Аккордеон
Создать список товаров, что каждый элемент Контента будет развернуть и свернуть, щелкнув по его заголовку.
Использование
Чтобы применить аккордеон компонента, добавить uk-accordion
класс и data-uk-accordion
атрибут в элемент-контейнер. Добавить uk-accordion-content
для каждого класса содержание разделов внутри контейнера. Наконец, добавьте uk-accordion-title
класса для любого элемента, как Заголовок, выше содержимого, чтобы создать переключатель.
Пример
Заголовок 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Заголовок 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Заголовок 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Разметки
<div class="uk-accordion" data-uk-accordion>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
<h3 class="uk-accordion-title">...</h3>
<div class="uk-accordion-content">...</div>
</div>
Muliple открытых позиций
Для отображения нескольких разделов содержание в то же время без него рушится, когда другой открыт, добавить {collapse: false}
параметр для атрибута данных.
Пример
Заголовок 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Заголовок 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Заголовок 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
JavaScript варианты
Вариант | Возможное значение | По умолчанию | Описание |
---|---|---|---|
showfirst |
boolean | true | Шоу первого элемента инициализации |
collapse |
boolean | true | Разрешить несколько открытых позиций |
animate |
boolean | true | Анимировать переключение |
easing |
string | swing | Функция анимации |
duration |
integer | 300 | Длительность анимации |
toggle |
string | .uk-accordion-title | CSS селектор переключает |
containers |
string | .uk-accordion-content | Селектор CSS для содержимого контейнеров |
clsactive |
string | uk-active | Класса, чтобы добавить, когда элемент активен |
Инициализации элементов вручную
var accordion = UIkit.accordion(element, { /* options */ });
События
Название | Параметр | Описание |
---|---|---|
toggle.uk.accordion |
event, active, toggle, content | По пункту переключения |