Выпадающие элементы
Переключайте контекстные оверлеи для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.
Обзор
Выпадающие элементы - это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в BS4. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.
Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.
Если вы компилируете наши JS файлы, необходим util.js.
Доступность
Стандарт WAIARIA описывает и определяет виджет role="menu" как настоящий виджет, но лишь для меню «а-ля приложение», запускающих действия или функции. Меню ARIA могут содержать лишь пункты меню, чекбоксы, «радио-кнопки», группы «радио-кнопок» и подменю.
Выпадающие элементы Bootstrap, с другой стороны, спроектированы для решения множества задач и могут работать в разных структурах разметки. Например, можно создать выпадающие элементы, содержащие дополнительные поля ввода и элементы контроля форм, такие как поиск или поле ввода логина. По этой причине BS4 не «ожидает» (и не добавляет автоматически) ни один из атрибутов (role и aria-), необходимых для меню согласно стандарту ARIA.
Однако Bootstrap всегда добавляет встроенную поддержку для большинства стандартных взаимодействий меню и клавиатуры, таких как возможность двигаться через отдельные элементы класса .dropdown-item кнопками курсора на клавиатуре и закрывать меню кнопкой ESC.
Примеры
Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом .dropdown или другим элементом с position: relative;. При необходимости выпадающие элементы можно запускать из элементов <a> или <button>.
Выпадающие элементы одинарных кнопок
Любую одинарную кнопку .btn можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами <button>:
<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButton"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Кнопка выпадающего списка </button><divclass="dropdown-menu"aria-labelledby="dropdownMenuButton"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></div>А вот так - с <a> элементами:
<divclass="dropdown"><aclass="btn btn-secondary dropdown-toggle"href="#"role="button"id="dropdownMenuLink"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающая ссылка </a><divclass="dropdown-menu"aria-labelledby="dropdownMenuLink"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></div>Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
<!-- Example single danger button --><divclass="btn-group"><buttontype="button"class="btn btn-danger dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Action </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div>Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного отступа вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
<!-- Example split danger button --><divclass="btn-group"><buttontype="button"class="btn btn-danger">Action</button><buttontype="button"class="btn btn-danger dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div>Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
<!-- Large button groups (default and split) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Large button </button><divclass="dropdown-menu"> ... </div></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg"type="button"> Large button </button><buttontype="button"class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"> ... </div></div><!-- Small button groups (default and split) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Small button </button><divclass="dropdown-menu"> ... </div></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm"type="button"> Small button </button><buttontype="button"class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"> ... </div></div>Направления
«Выпадающий вверх»
Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.
<!-- Default dropup button --><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropup </button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div><!-- Split dropup button --><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary"> Split dropup </button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div>«Выпадающий вправо»
Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.
<!-- Default dropright button --><divclass="btn-group dropright"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropright </button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div><!-- Split dropright button --><divclass="btn-group dropright"><buttontype="button"class="btn btn-secondary"> Split dropright </button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropright</span></button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div>«Выпадающий влево»
Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.
<!-- Default dropleft button --><divclass="btn-group dropleft"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropleft </button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div><!-- Split dropleft button --><divclass="btn-group"><divclass="btn-group dropleft"role="group"><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropleft</span></button><divclass="dropdown-menu"><!-- Dropdown menu links --></div></div><buttontype="button"class="btn btn-secondary"> Split dropleft </button></div>Пункты меню
Исторически содержимым выпадающих элементов всегда были ссылки, но BS4 изменил это. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.
<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu2"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown </button><divclass="dropdown-menu"aria-labelledby="dropdownMenu2"><buttonclass="dropdown-item"type="button">Action</button><buttonclass="dropdown-item"type="button">Another action</button><buttonclass="dropdown-item"type="button">Something else here</button></div></div>Вы также можете создать неинтерактивные выпадающие элементы класса .dropdown-item-text. Свободно стилизуйте их обычным CSS.
<divclass="dropdown-menu"><spanclass="dropdown-item-text">Dropdown item text</span><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div>Активные элементы меню
Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Regular link</a><aclass="dropdown-item active"href="#">Active link</a><aclass="dropdown-item"href="#">Another link</a></div>Неактивные элементы меню
Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Regular link</a><aclass="dropdown-item disabled"href="#">Disabled link</a><aclass="dropdown-item"href="#">Another link</a></div>Выравнивание меню
По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.
Внимание! Выпадающие элементы позиционируются благодаря Popper.js (за исключением случаев, когда они содержатся в navbar).
<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Right-aligned menu </button><divclass="dropdown-menu dropdown-menu-right"><buttonclass="dropdown-item"type="button">Action</button><buttonclass="dropdown-item"type="button">Another action</button><buttonclass="dropdown-item"type="button">Something else here</button></div></div>Отзывчивое выравнивание
Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив атрибут data-display="static", и используйте классы адаптивных вариантов.
Чтобы выровнять выпадающее меню вправо с заданной точкой останова или больше, добавьте .dropdown-menu{-sm|-md|-lg|-xl}-right.
<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"data-display="static"aria-haspopup="true"aria-expanded="false"> Left-aligned but right aligned when large screen </button><divclass="dropdown-menu dropdown-menu-lg-right"><buttonclass="dropdown-item"type="button">Action</button><buttonclass="dropdown-item"type="button">Another action</button><buttonclass="dropdown-item"type="button">Something else here</button></div></div>Чтобы выровнять выпадающее меню влево с заданной точкой останова или более, добавьте .dropdown-menu-right и .dropdown-menu{-sm|-md|-lg|-xl}-left.
<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"data-display="static"aria-haspopup="true"aria-expanded="false"> Right-aligned but left aligned when large screen </button><divclass="dropdown-menu dropdown-menu-right dropdown-menu-lg-left"><buttonclass="dropdown-item"type="button">Action</button><buttonclass="dropdown-item"type="button">Another action</button><buttonclass="dropdown-item"type="button">Something else here</button></div></div>Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.
Содержание меню
Заголовки меню
Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.
<divclass="dropdown-menu"><h6class="dropdown-header">Dropdown header</h6><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a></div>Разделители меню
Разделяйте группы родственных элементов меню разделителем.
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div>Текст меню
Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.
<divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;"><p> Some example text that's free-flowing within the dropdown menu. </p><pclass="mb-0"> And this is more example text. </p></div>Формы меню
Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.
<divclass="dropdown-menu"><formclass="px-4 py-3"><divclass="form-group"><labelfor="exampleDropdownFormEmail1">Email address</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail1"placeholder="email@example.com"></div><divclass="form-group"><labelfor="exampleDropdownFormPassword1">Password</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword1"placeholder="Password"></div><divclass="form-group"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck"><labelclass="form-check-label"for="dropdownCheck"> Remember me </label></div></div><buttontype="submit"class="btn btn-primary">Sign in</button></form><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">New around here? Sign up</a><aclass="dropdown-item"href="#">Forgot password?</a></div><formclass="dropdown-menu p-4"><divclass="form-group"><labelfor="exampleDropdownFormEmail2">Email address</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail2"placeholder="email@example.com"></div><divclass="form-group"><labelfor="exampleDropdownFormPassword2">Password</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword2"placeholder="Password"></div><divclass="form-group"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck2"><labelclass="form-check-label"for="dropdownCheck2"> Remember me </label></div></div><buttontype="submit"class="btn btn-primary">Sign in</button></form>Параметры раскрывающегося списка
Используйте data-offset или data-reference, чтобы изменить местоположение раскрывающегося списка.
<divclass="d-flex"><divclass="dropdown mr-1"><buttontype="button"class="btn btn-secondary dropdown-toggle"id="dropdownMenuOffset"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"data-offset="10,20"> Offset </button><divclass="dropdown-menu"aria-labelledby="dropdownMenuOffset"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a></div></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary">Reference</button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"id="dropdownMenuReference"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"data-reference="parent"><spanclass="sr-only">Toggle Dropdown</span></button><divclass="dropdown-menu"aria-labelledby="dropdownMenuReference"><aclass="dropdown-item"href="#">Action</a><aclass="dropdown-item"href="#">Another action</a><aclass="dropdown-item"href="#">Something else here</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Separated link</a></div></div></div>Использование
Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.
На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. Как только выпадающий элемент закрыт, эти дополнительные пустые обработчики удаляются.
Через атрибуты
Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.
<divclass="dropdown"><buttonid="dLabel"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Dropdown trigger </button><divclass="dropdown-menu"aria-labelledby="dLabel"> ... </div></div>Через JS
Управляйте выпадающими элементами с помощью JavaScript:
$('.dropdown-toggle').dropdown()data-toggle="dropdown" still required
Независимо от того, управляете вы выпадающим элементом через JavaScript или атрибутами, атрибут data-toggle="dropdown" всегда необходим в элементе, запускающем выпадающий элемент.
Параметры
Передавайте параметры через JavaScript или атрибуты. Если используются атрибуты, добавляйте название параметра к data- как в data-offset="".
| Название | Тип | По умолч. | Описание |
|---|---|---|---|
| offset | number | string | function | 0 | Смещение раскрывающегося списка относительно его цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Смещение выпадающего элемента относительно его триггера. См. отступы Popper.js |
| flip | boolean | true | Позволяет выпадающему элементу «перевернуться», если произошло перекрытие другого элемента. Больше информации: flip docs. |
| boundary | string | element | 'scrollParent' | Граница ограничения переполнения выпадающего меню. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только для JavaScript). Для получения дополнительной информации обратитесь к документации preventOverflow от Popper.js. |
| reference | string | element | 'toggle' | Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper.js's referenceObject docs. |
| display | string | dynamic | static | По умолчанию мы используем Popper.js для динамического позиционирования. Для отключения используйте static. |
| popperConfig | null | object | null | Чтобы изменить конфигурацию Popper.js по умолчанию в Bootstrap, смотрите Конфигурацию Popper.js. |
Обратите внимание, что если для boundary установлено значение, отличное от 'scrollParent', позиция position: static применяется к контейнеру .dropdown.
Методы
| Метод | Описание |
|---|---|
$().dropdown('toggle') | Задействует поведение toggle в выпадающем меню данного навбара или при навигации «TAB»ом. |
$().dropdown('show') | Показывает выпадающее меню данной навигационной панели или вкладки. |
$().dropdown('hide') | Скрывает выпадающее меню данной навигационной панели или вкладки. |
$().dropdown('update') | Обновляет позицию «выпадения» элемента. |
$().dropdown('dispose') | Уничтожает выпадающий элемент. |
События
Все события выпадающих элементов наступают в родительском элементе класса .dropdown-menu и несут свойство relatedTarget, значение которого равно элементу «якоря» (ссылка, т.е. <a>), запускающего функциональность toggle.
| Событие | Описание |
|---|---|
show.bs.dropdown | Это событие наступает немедленно по вызову экземпляра метода show. |
shown.bs.dropdown | Это событие наступает, когда выпадающий элемент стал видимым юзеру (будет ждать завершения CSS-переходов). |
hide.bs.dropdown | Это событие наступает немедленно по вызову экземпляра метода hide. |
hidden.bs.dropdown | Это событие наступает, когда выпадающий элемент стал невидимым юзеру (будет ждать завершения CSS-переходов). |
$('#myDropdown').on('show.bs.dropdown',function(){// do something…})