Аккордеон

Аккордеон Bric предоставляет способ разбивки и переключения между скрытием и отображением больших объемов контента. Аккордеоны состоят из различных субэлементов, таких как Карты Bric и Div контейнер Bric, что позволяет легко настраивать и стилизовать их независимо друг от друга.

Добавление дополнительных разделов

Чтобы добавить дополнительные разделы аккордеона, просто выберите одну из карточек (находится в главном контейнере div аккордеона) через дерево слоев и продублируйте ее с помощью сочетания клавиш ⌘Д.

Структура

Структура аккордеона немного сложнее, чем у большинства других Brics найдено в Blocs. Он состоит из Div контейнер Bric это имеет свой Тип установлен на Аккордеонный контейнер и ее ID установить уникальное значение, например аккордеон-17605. В этом контейнере есть несколько Карты Brics. Каждая карта Bric имеет Ссылка Bric в разделе заголовка карты и дополнительном Div контейнер, содержащий раздел тела карты.

Связь

Аккордеон Bric функции управляются через Ссылка Bric (находится в разделе заголовка карточки) и Div контейнер (содержащий раздел тела карты). Оба этих предмета имеют настраиваемые атрибуты данных применяется к ним, чтобы дать им типичную функциональность аккордеона и позволить им общаться друг с другом.

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

Ассоциация цель данных атрибут имеет значение, установленное на уникальную ссылку, например # accordion-17605-item-1, ария-контроль атрибут содержит почти идентичное значение цель данных атрибут, но с удаленного # в начале, например аккордеон-17605-предмет-1. Эти уникальные ссылки должны соответствовать ID соответствующего контейнера div, в который вложено тело карты.

Контейнер для аккордеона Div

Внутри каждой карты Bric (находится в основном контейнере аккордеона) является дополнительным Div контейнер, в котором есть ID установить уникальное значение, например аккордеон-17605-предмет-1. Это значение идентификатора должно соответствовать и соответствовать настраиваемым атрибутам данных, цель данных и ария-контроль нашел по ссылке Bric (находится в разделе заголовка карты).

Этот контейнер div Bric также содержит различные настраиваемые атрибуты данных, наиболее важным из которых является родитель данных. Это значение этого атрибута данных должно соответствовать ID основного контейнера для гармошки, например # аккордеон-17605. Этот атрибут данных сообщает браузеру, к какому контейнеру аккордеона относится этот раздел.

Совет для начинающих

Если вы вносите изменения в атрибуты данных аккордеонной ссылки цель данных or ария-контроль, позаботьтесь об обновлении ID для соответствующего контейнера div (содержащего раздел тела карточки) и наоборот.

Для получения более подробной информации о том, как работают аккордеоны, пожалуйста, обратитесь к Документы Bootstrap 4.

Обновлено 3 декабря 2018 г.

Была ли эта статья полезна?

Статьи по теме