Сворачиваемое содержимое

Как это работает

Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height - изменением его с текущего до 0. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding в элементе класса .collapse. Вместо padding используйте независимый «оборачивающий» элемент.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Как правило, мы рекомендуем использовать <button> с атрибутом data-bs-target. Хотя это не рекомендуется с семантической точки зрения, Вы также можете использовать <a> с атрибутом href (и role="button"). В обоих случаях требуется data-bs-toggle="collapse".

<p><aclass="btn btn-primary"data-bs-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample"> Ссылка с href
</a><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample"> Кнопка с data-target
</button></p><divclass="collapse"id="collapseExample"><divclass="card card-body"> Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div></div>

По горизонтали

Плагин коллапса также поддерживает горизонтальное сворачивание. Добавьте класс модификатора .collapse-horizontal для перехода ширины width вместо высоты height и установите ширину width непосредственно для дочернего элемента. Не стесняйтесь писать свой собственный Sass, использовать встроенные стили или использовать наши утилиты ширины.

<p><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseWidthExample"aria-expanded="false"aria-controls="collapseWidthExample"> Переключить ширину сворачиваемого </button></p><divstyle="min-height: 120px;"><divclass="collapse collapse-horizontal"id="collapseWidthExample"><divclass="card card-body"style="width: 300px;"> Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании. </div></div></div>

Взаимодействие со множественными объектами

Элемент <button> или <a> может отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора в атрибуте data-bs-target или href. И наоборот, несколько элементов <button> или <a> могут отображать и скрывать один и тот же элемент, если каждый из них ссылается на него с помощью своего атрибута data-bs-target или href.

<p><aclass="btn btn-primary"data-bs-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Переключить первый элемент</a><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Переключить второй элемент</button><buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button></p><divclass="row"><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample1"><divclass="card card-body"> Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div></div></div><divclass="col"><divclass="collapse multi-collapse"id="multiCollapseExample2"><divclass="card card-body"> Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div></div></div></div>

Доступность

Не забудьте добавить к элементу управления aria-expanded. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если сворачиваемый элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded="false". Если Вы установили открываемый сворачиваемый элемент по умолчанию с помощью класса show, вместо этого установите aria-expanded="true" для элемента управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт сворачиваемый элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, <a> или <div>), атрибут role="button" должен быть добавлен к элементу.

Если Ваш элемент управления нацелен на один сворачиваемый элемент - т.е. атрибут data-bs-target указывает на селектор id Вы должны добавить атрибут aria-controls к элементу управления, содержащий id элемента управления. разборный элемент. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.

Обратите внимание, что текущая реализация Bootstrap не распространяется на различные дополнительные взаимодействия с клавиатурой, описанные в ARIA Authoring Practices Guide аккордеонный шаблон - Вам нужно будет включить их самостоятельно в собственный JavaScript.

CSS

Sass переменные

$transition-collapse:height.35sease;$transition-collapse-width:width.35sease;

Классы

Классы перехода сворачивания можно найти в scss/_transitions.scss, поскольку они используются в нескольких компонентах (сворачивание и аккордеон).

.collapse{&:not(.show){display:none;}}.collapsing{height:0;overflow:hidden;@include transition($transition-collapse);&.collapse-horizontal{width:0;height:auto;@include transition($transition-collapse-width);}}

Использование

Плагин collapse использует несколько классов для работы:

• .collapse скрывает содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда переход начинается, и удаляется, когда он заканчивается

Эти классы можно найти в _transitions.scss.

Через атрибуты данных

Просто добавьте к элементу data-bs-toggle="collapse" и data-bs-target, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-bs-target принимает CSS-селектор, к которому применяется коллапс. Не забудьте добавить к складному элементу класс collapse. Если Вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show.

Чтобы добавить управление группами в виде гармошки в сворачиваемую область, добавьте атрибут данных data-bs-parent="#selector". Обратитесь к странице аккордеона для получения дополнительной информации.

Через JavaScript

Включить вручную с помощью:

constcollapseElementList=document.querySelectorAll('.collapse')constcollapseList=[...collapseElementList].map(collapseEl=>newbootstrap.Collapse(collapseEl))

Параметры

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

Методы

Активирует Ваш контент как сворачиваемый элемент. Принимает необязательные параметры object.

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

constbsCollapse=newbootstrap.Collapse('#myCollapse',{toggle:false})

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

constmyCollapsible=document.getElementById('myCollapsible')myCollapsible.addEventListener('hidden.bs.collapse',event=>{// сделайте что-нибудь...
})