ДокументацияРазделы, компоненты, системы и их подразделы
Collapse
Раскрытие и сворачивание контента
Disclosure
Collapse раскрывает дополнительный контент
Используйте компонент, когда вторичная информация нужна по запросу и пользователь сохраняет текущий контекст. Важное предупреждение или основное действие нельзя прятать по умолчанию.
Одиночное раскрытие
Триггер связывается с блоком через data-ox-target. Ядро синхронизирует aria-expanded и aria-hidden.
SCSS-ядро, JavaScript-модули, системные токены и публичные точки входа для проектной настройки.
HTMLТриггер и контент
<button
type="button"
data-ox-toggle="collapse"
data-ox-target="#delivery-details"
aria-controls="delivery-details"
aria-expanded="false"
>
Что входит в поставку?
</button>
<div class="ox-collapse" id="delivery-details" data-ox-ui="collapse">
<div>SCSS-ядро, JavaScript-модули и системные токены.</div>
</div>Accordion закрывает соседний блок
Все панели указывают одного родителя и включают accordion-режим. Одновременно открытой остаётся только одна панель группы.
Установите пакет, подключите нужную SCSS-точку входа и зарегистрируйте используемые JS-модули.
Да. Настройка css-variable-prefix применяется до подключения SCSS-точки входа.
Проектные настройки и адаптеры размещаются вне ядра OKAUX в локальном facade-слое приложения.
data-ox-parent="#group"
data-ox-accordion="true"
Программный API и события
Получите существующий экземпляр через публичный класс Collapse. События до изменения состояния можно отменить.
JavaScriptУправление экземпляром
import { Collapse } from 'okaux/js/app.js';
const panel = document.querySelector('#delivery-details');
const collapse = Collapse.getOrCreateInstance(panel);
collapse.show();
collapse.hide();
collapse.toggle();collapse:showПеред раскрытием; событие можно отменить.collapse:shownПосле завершения анимации раскрытия.collapse:hideПеред сворачиванием; событие можно отменить.collapse:hiddenПосле завершения анимации сворачивания.
Связь триггера и панели
Кнопка остаётся доступной с клавиатуры, а её состояние совпадает с фактической видимостью контента.
<button>Нативный триггер активируется Enter и Space.aria-controlsУказывает id управляемой панели.aria-expandedЯдро обновляет состояние кнопки при show и hide.aria-hiddenЯдро синхронизирует доступность содержимого панели.