Выпадающие элементы
Переключайте контекстные наложения для отображения списков ссылок и многого другого с помощью модуля выпадающих меню Bootstrap.
Обзор
Выпадающие элементы - это переключаемые, контекстные элементы поверхностного наложения для отображения списков ссылок и т.п. Они интерактивны благодаря плагину JavaScript в Bootstrap. Функциональность toggle в выпадающих элементах запускается по клику, а не по наведению – это сделано умышленно.
Выпадающие элементы «построены» на сторонней библиотеке Popper.js, которая обеспечивает динамическое позиционирование и определение размера окна просмотра. Обязательно включите popper.min.js перед JavaScript Bootstrap или используйте bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js.
Если вы компилируете наши JavaScript файлы, необходим 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="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</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="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</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"> Действие </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Отдельная ссылка</a></div></div>Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса .dropdown-toggle-split для правильного отступа вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг padding с обеих сторон выпадающей «каретки» и удаляет margin-left, добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
<!-- Пример раздельной кнопки Опасность --><divclass="btn-group"><buttontype="button"class="btn btn-danger">Действие</button><buttontype="button"class="btn btn-danger dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Переключатель выпадающего списка</span></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Отдельная ссылка</a></div></div>Размеры
Выпадающие элементы кнопок работают с кнопками любых размеров, включая кнопки по умолчанию и кнопки с выпадающими элементами с разделенными зонами.
<!-- Группы больших кнопок (по умолчанию и разделенные) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Большая кнопка </button><divclass="dropdown-menu"> ... </div></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-lg"type="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">Переключатель выпадающего списка</span></button><divclass="dropdown-menu"> ... </div></div><!-- Небольшие группы кнопок (по умолчанию и разделенные) --><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm dropdown-toggle"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Маленькая кнопка </button><divclass="dropdown-menu"> ... </div></div><divclass="btn-group"><buttonclass="btn btn-secondary btn-sm"type="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">Переключатель выпадающего списка</span></button><divclass="dropdown-menu"> ... </div></div>Направления
«Выпадающий вверх»
Добавьте класс .dropup и выпадающий элемент будет «выпадать» вверх.
<!-- Кнопка выпадающего меню по умолчанию --><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающий вверх </button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div><!-- Раздельная кнопка выпадающая вверх --><divclass="btn-group dropup"><buttontype="button"class="btn btn-secondary"> Раздельный выпад вверх </button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Переключатель выпадающего списка</span></button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div>«Выпадающий вправо»
Добавьте класс .dropright и выпадающий элемент будет «выпадать» вправо.
<!-- Кнопка выпадающего вправо по умолчанию --><divclass="btn-group dropright"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающий вправо </button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div><!-- Раздельная кнопка выпадающего вправо по умолчанию --><divclass="btn-group dropright"><buttontype="button"class="btn btn-secondary"> Раздельный выпадающий вправо </button><buttontype="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Переключатель выпада вправо</span></button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div>«Выпадающий влево»
Добавьте класс .dropleft и выпадающий элемент будет «выпадать» влево.
<!-- Кнопка выпадающая влево по умолчанию --><divclass="btn-group dropleft"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающий влево </button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div><!-- Раздельная кнопка выпадающая влево --><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">Переключатель выпадающего влево</span></button><divclass="dropdown-menu"><!-- Ссылки раскрывающегося меню --></div></div><buttontype="button"class="btn btn-secondary"> Раздельный выпадающий влево </button></div>Пункты меню
Исторически содержимым выпадающих элементов всегда были ссылки, но начиная с версии 4 это уже не так. Сейчас вы можете использовать в качестве содержимого выпадающих элементов <button>, а не только <a>.
<divclass="dropdown"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenu2"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Выпадающий вниз </button><divclass="dropdown-menu"aria-labelledby="dropdownMenu2"><buttonclass="dropdown-item"type="button">Действие</button><buttonclass="dropdown-item"type="button">Другое действие</button><buttonclass="dropdown-item"type="button">Что-то еще здесь</button></div></div>Вы также можете создавать неинтерактивные выпадающие элементы с помощью .dropdown-item-text. Не стесняйтесь изменять стиль с помощью пользовательских CSS или текстовых утилит.
<divclass="dropdown-menu"><spanclass="dropdown-item-text">Текст выпадающего списка</span><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a></div>Активные элементы меню
Добавьте класс .active к элементу выпадающего меню для его стилизации как «активированного».
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Обычная ссылка</a><aclass="dropdown-item active"href="#">Активная ссылка</a><aclass="dropdown-item"href="#">Другая ссылка</a></div>Неактивные элементы меню
Добавьте класс .disabled к элементу выпадающего меню для его стилизации как «деактивированного».
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Обычная ссылка</a><aclass="dropdown-item disabled"href="#"tabindex="-1"aria-disabled="true">Отключенная ссылка</a><aclass="dropdown-item"href="#">Другая ссылка</a></div>Выравнивание меню
По умолчанию выпадающее меню автоматически расположено в 100% от вершины и на левой стороне родителя. Добавьте класс .dropdown-menu-right к элементу класса .dropdown-menu для выравнивания выпадающего меню по правой стороне.
Внимание! Выпадающие элементы позиционируются благодаря Popper (кроме случаев, когда они содержатся в панели навигации).
<divclass="btn-group"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Меню с выравниванием по правому краю </button><divclass="dropdown-menu dropdown-menu-right"><buttonclass="dropdown-item"type="button">Действие</button><buttonclass="dropdown-item"type="button">Другое действие</button><buttonclass="dropdown-item"type="button">Что-то еще здесь</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"> По левому краю, но по правому краю на большом экране </button><divclass="dropdown-menu dropdown-menu-lg-right"><buttonclass="dropdown-item"type="button">Действие</button><buttonclass="dropdown-item"type="button">Другое действие</button><buttonclass="dropdown-item"type="button">Что-то еще здесь</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"> По правому краю, но по левому краю на большом экране </button><divclass="dropdown-menu dropdown-menu-right dropdown-menu-lg-left"><buttonclass="dropdown-item"type="button">Действие</button><buttonclass="dropdown-item"type="button">Другое действие</button><buttonclass="dropdown-item"type="button">Что-то еще здесь</button></div></div>Обратите внимание, что вам не нужно добавлять атрибут data-display="static" к выпадающим кнопкам на панелях навигации, поскольку Popper.js не используется на панелях навигации.
Содержание меню
Заголовки меню
Добавьте заголовок, чтобы обозначить секции действий любого выпадающего меню.
<divclass="dropdown-menu"><h6class="dropdown-header">Заголовок раскрывающегося списка</h6><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a></div>Разделители меню
Разделяйте группы родственных элементов меню разделителем.
<divclass="dropdown-menu"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Отдельная ссылка</a></div>Текст меню
Размещайте любой текст внутри выпадающего меню с текстом, используя утилиты отступа. Заметьте, что вам понадобится дополнительная настройка размеров для ограничения ширины меню.
<divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;"><p> Пример текста, который свободно перемещается в раскрывающемся меню. </p><pclass="mb-0"> И это еще один пример текста. </p></div>Формы меню
Расположите форму внутри выпадающего меню, и используйте утилиты паддинга или марджина для ее уплотнения.
<divclass="dropdown-menu"><formclass="px-4 py-3"><divclass="form-group"><labelfor="exampleDropdownFormEmail1">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail1"placeholder="email@example.com"></div><divclass="form-group"><labelfor="exampleDropdownFormPassword1">Пароль</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword1"placeholder="Пароль"></div><divclass="form-group"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck"><labelclass="form-check-label"for="dropdownCheck"> Запомните меня </label></div></div><buttontype="submit"class="btn btn-primary">Войти в систему</button></form><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Новенький здесь? Зарегистрироваться</a><aclass="dropdown-item"href="#">Забыли пароль?</a></div><formclass="dropdown-menu p-4"><divclass="form-group"><labelfor="exampleDropdownFormEmail2">Адрес электронной почты</label><inputtype="email"class="form-control"id="exampleDropdownFormEmail2"placeholder="email@example.com"></div><divclass="form-group"><labelfor="exampleDropdownFormPassword2">Пароль</label><inputtype="password"class="form-control"id="exampleDropdownFormPassword2"placeholder="Пароль"></div><divclass="form-group"><divclass="form-check"><inputtype="checkbox"class="form-check-input"id="dropdownCheck2"><labelclass="form-check-label"for="dropdownCheck2"> Запомните меня </label></div></div><buttontype="submit"class="btn btn-primary">Войти в систему</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"> Смещение </button><divclass="dropdown-menu"aria-labelledby="dropdownMenuOffset"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a></div></div><divclass="btn-group"><buttontype="button"class="btn btn-secondary">Справка</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">Переключатель выпадающего списка</span></button><divclass="dropdown-menu"aria-labelledby="dropdownMenuReference"><aclass="dropdown-item"href="#">Действие</a><aclass="dropdown-item"href="#">Другое действие</a><aclass="dropdown-item"href="#">Что-то еще здесь</a><divclass="dropdown-divider"></div><aclass="dropdown-item"href="#">Отдельная ссылка</a></div></div></div>Использование
Через атрибуты или JavaScript, плагин выпадающих элементов изменяет (показывает скрытоесодержимое) состояние содержимого (выпадающие меню) изменением класса .show элемента родительского списка. Атрибут data-toggle="dropdown" отвечает за закрытие выпадающих меню на уровне приложения, так что будет неплохой идеей всегда использовать данный атрибут.
На устройствах, активируемых касанием, открытие выпадающего элемента добавляет пустые обработчики ($.noop) mouseover к непосредственным «детям» элемента <body>. Этот, по общему мнению, некрасивый хак (без которого любое касание в iOS вне выпадающего элемента не закроет выпадающий элемент) необходим для обработки проблемы с делегированием событий в iOS. После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover указателя мыши удаляются.
Через атрибуты
Добавьте к ссылке или кнопке атрибут data-toggle="dropdown" для скрытия\показа выпадающего элемента.
<divclass="dropdown"><buttonid="dLabel"type="button"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"> Триггер выпадающего списка </button><divclass="dropdown-menu"aria-labelledby="dLabel"> ... </div></div>Через JavaScript
Управляйте выпадающими элементами с помощью JavaScript:
$('.dropdown-toggle').dropdown()data-toggle="dropdown" все еще требуется
Независимо от того, управляете вы выпадающим элементом через 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(){// сделайте что-нибудь...
})