Выпадающие списки
Выпадающие списки переключаемы, контекстно перекрываются для отображения списков ссылок и многое другое. Они интерактивны с включенным плагином выпадающих списков JavaScript. Они переключаются нажатием, а не при наведении курсора; Это намеренное дизайнерское решение.
Содержание
- Содержание
- Примеры
- Изменение размера
- Вариант сброса
- Пункты меню
- Выравнивание меню
- Заголовки меню
- Разделители меню
- Отключенные пункты меню
- Применение
Примеры
Оберните переключатель выпадающего списка (ваша кнопка или ссылка) и раскрывающееся меню внутри .dropdown
, или другой элемент, который объявляет position: relative;
.Выпадающие списки могут запускаться из элементов <a>
или <button>
, чтобы лучше соответствовать вашим потенциальным потребностям.
Выпадающие списки одной кнопки
Любой отдельный .btn
можно превратить в выпадающий переключатель с некоторыми изменениями разметки. Вот как вы можете заставить их работать с элементами <button>
:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
И с элементами <a>
:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Самое приятное то, что вы можете сделать это с любым вариантом кнопки:
Выпадающие списки разделенных кнопок
Аналогичным образом создайте выпадающие списки разделенных кнопок с практически такой же разметкой, что и выпадающие списки с одной кнопкой, но с добавлением .dropdown-toggle-split
для правильного интервала вокруг выпадающей каретки.
Мы используем этот дополнительный класс, чтобы уменьшить горизонтальный padding
с обеих сторон каретки на 25% и удалить margin-left
добавленный для обычных выпадающих кнопок. Эти дополнительные изменения удерживают курсор, центрированный в разделенной кнопке, и обеспечивают более подходящую область попадания рядом с главной кнопкой.
Изменение размера
Выпадающие кнопки работают с кнопками всех размеров, включая кнопки по умолчанию и разделенные кнопки.
Вариант сброса
Вызовите выпадающие меню над элементами, добавив .dropup
к родительскому элементу.
Пункты меню
должно было быть ссылкой, но это уже не так с v4. Теперь вы можете опционально использовать элементы <button>
в выпадающих списках вместо просто <a>
.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Выравнивание меню
По умолчанию выпадающее меню автоматически позиционируется на 100% сверху и вдоль левой стороны его родителя. Добавьте .dropdown-menu-right
в .dropdown-menu
, чтобы выровнять выпадающее меню по правому краю.
Берегись! Выпадающие списки позиционируются только с помощью CSS и могут потребоваться некоторые дополнительные стили для точного выравнивания.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Заголовки меню
Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
Разделители меню
Отделите группы связанных элементов меню с помощью разделителя.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
Отключенные пункты меню
Добавьте .disabled
к элементам в выпадающем списке, чтобы стилизовать их как отключенные.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Применение
С помощью атрибутов данных или JavaScript плагин выпадающего списка переключает скрытый контент (выпадающие меню) путем переключения класса .show
на родительский элемент списка.
На мобильных устройствах при раскрытии выпадающего списка добавляется .dropdown-backdrop
в качестве области подключения для закрытия раскрывающихся меню при нажатии вне меню, что необходимо для правильной поддержки iOS. Это означает, что переход из раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.
Примечание. Атрибут data-toggle="dropdown"
используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.
Через атрибуты данных
Добавьте data-toggle="dropdown"
в ссылку или кнопку, чтобы переключить выпадающий список.
Через JavaScript
Вызовите выпадающие списки с помощью JavaScript:
data-toggle="dropdown"
по-прежнему требуется
Независимо от того, вызываете ли вы выпадающий список через JavaScript или вместо этого используете data-api, всегда требуется, чтобы data-toggle="dropdown"
присутствовал в элементе выпадающего элемента.
Опции
Нет.
Методы
Метод | Описание |
---|---|
$().dropdown('toggle') |
Переключает раскрывающееся меню данной навигационной панели или с вкладками. |
События
Все выпадающие события запускаются в родительском элементе .dropdown-menu
и имеют свойствоrelatedTarget
, значение которого является переключающим элементом привязки.
Событие | Описание |
---|---|
show.bs.dropdown |
Это событие срабатывает сразу после вызова метода экземпляра показа. |
shown.bs.dropdown |
Это событие вызывается, когда выпадающий список становится видимым для пользователя (будет ждать переходов CSS, чтобы завершить). |
hide.bs.dropdown |
Это событие вызывается немедленно при вызове метода hide instance. |
hidden.bs.dropdown |
Это событие вызывается, когда раскрывающийся список закончил скрываться от пользователя (будет ждать переходов CSS, чтобы завершить). |