Компонент Accordion

Компонент Uikit 3 accordion

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

Как использовать компонент Accordion в UIkit 3

Компонент UIkit Accordion состоит из родительского контейнера с атрибутом uk-accordion , заголовка и контентной части для каждого элемента.

Класс Описание
.uk-accordion-title Определяет и стилизует переключатель для каждого элемента. Используйте тег <a> для элементов.
.uk-accordion-content Определяет контентную часть для каждого элемента списка. 
<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href="#"></a>
        <div class="uk-accordion-content"></div>
    </li>
</ul>
    • Элемент 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Элемент 2
    • Элемент 3 
  • <ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Элемент 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Первый элемент активен

По умолчанию все элементы списка свернуты. Чтобы отменить стандартное поведение и всегда раскрывать один элемент, добавьте в атрибут параметр collapsible: false

<ul uk-accordion="collapsible: false">...</ul>
    • Элемент 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Элемент 2
    • Элемент 3 
  • <ul uk-accordion="collapsible: false">
    <li>
        <a class="uk-accordion-title" href="#">Элемент 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Множественное раскрытие

По умолчанию активным может быть один элемент. При клику на следующий элемент, предыдущий закрывается. Для отключения сворачивания добавьте в атрибут uk-accordion родительского блока опцию multiple: true

<ul uk-accordion="multiple: true">...</ul>
    • Элемент 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Элемент 2
    • Элемент 3 
  • <ul uk-accordion="multiple: true">
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Элемент 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Установка позиций открытия

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

Для этого добавьте интересующим элементам класс .uk-open. Для открытия нескольких элементов сразу добавьте опцию multiple: true в атрибут uk-accordion родительского элемента.

Внимание Кроме того, вы можете открыть любой элемент списка, добавив опцию active: <index> в атрибут uk-accordion родителя, например, active: 1 для раскрытия второго элемента списка. Обратите внимание, что отсчет начинается с нуля. При этом класс uk-open указанного элемента перезапишется.

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li>
    <li></li>
</ul>
    • Элемент 1
    • Элемент 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Элемент 3 
  • <ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Элемент 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Элемент 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Опции компонента Accordion

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

Опция Тип данных По умолчанию Описание
active Number false Index элемента, открытого по умолчанию.
animation Boolean true Установка анимации элемента.
collapsible Boolean true Разрешить закрытие всех элементов.
content String > .uk-accordion-content Селектор содержимого, выбирающий элементы контента.
duration Number 200 Задержка анимации в миллисекундах.
multiple Boolean false Разрешить несколько открытых элементов.
targets String > * CSS селектор элементов для метода toggle.
toggle String > .uk-accordion-title Селектор переключателя элементов.
transition String ease Опция задает значение свойства transition. Использутйе стандартные свойства CSS. смотреть все свойства.

JavaScript

Подробнее JavaScript компонентах.

Инициализация

UIkit.accordion(element, options);

События

Для компонента Accordion доступны следующие события:

Название Описание
beforeshow Срабатывает до активации до раскрытия элемента. Может отменить событие и вернуть false.
show Срабатывает после раскрытия элемента.
shown Срабатывает после окончания анимации элемента.
beforehide Срабатывает до раскрытия элемента. Может отменить скрытие и вернуть false.
hide Срабатывает после запуска анимации скрытия элемента.
hidden Проставляется после скрытия элемента.

Методы

У компонента есть следующие методы:

Toggle

UIkit.accordion(element).toggle(index, animate);

Переключатель панели контента.

Имя Тип По умолчанию Описание
index String, Integer, Node 0 Порядковый номер заголовка-переключателя. Начинается с нулевого индекса..
animate Boolean true Отменить анимацию раскрытия и вернуть false.