Випадаючі списки
Перемикайте контекстні накладення для відображення списків посилань тощо за допомогою розкривного плагіна Bootstrap.
Огляд
Випадаючі меню – це контекстні накладки, які можна перемикати, для відображення списків посилань тощо. Вони стають інтерактивними за допомогою плагіна JavaScript, що випадає, Bootstrap. Вони перемикаються клацанням, а не наведенням; це навмисне дизайнерське рішення .
Випадаючі списки побудовані на сторонній бібліотеці Popper , яка забезпечує динамічне позиціонування та визначення вікна перегляду. Обов’язково включіть popper.min.js перед JavaScript Bootstrap або використовуйте bootstrap.bundle.min.js
/ bootstrap.bundle.js
, який містить Popper. Popper не використовується для позиціонування спадних меню на навігаційних панелях, хоча динамічне позиціонування не потрібне.
Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js
.
Доступність
Стандарт WAI ARIA визначає фактичний role="menu"
віджет , але це стосується програмних меню, які запускають дії або функції. Меню ARIA можуть містити лише пункти меню, пункти меню прапорців, елементи меню перемикачів, групи перемикачів і підменю.
Випадаючі меню Bootstrap, з іншого боку, створені як загальні та застосовні до різноманітних ситуацій і структур розмітки. Наприклад, можна створити розкривні списки, які містять додаткові введення та елементи керування формою, такі як поля пошуку або форми входу. З цієї причини Bootstrap не очікує (і не додає автоматично) жодного з атрибутів role
і , необхідних для справжніх меню ARIA . Автори повинні будуть самі включити ці конкретніші атрибути.aria-
Однак Bootstrap додає вбудовану підтримку для більшості стандартних взаємодій із меню клавіатури, наприклад, можливість переміщатися між окремими .dropdown-item
елементами за допомогою клавіш курсору та закривати меню за допомогою ESCклавіші.
Приклади
Загорніть перемикач спадного меню (вашу кнопку чи посилання) і спадне меню всередину .dropdown
або інший елемент, який оголошує position: relative;
. Випадаючі списки можна запускати з <a>
або <button>
елементів, щоб краще відповідати вашим потенційним потребам.
Одна кнопка
Будь-яку одиницю .btn
можна перетворити на перемикач спадного меню, змінивши розмітку. Ось як ви можете використовувати їх для роботи з <button>
елементами:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<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>
</div>
І з <a>
елементами:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<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>
</div>
Найкраще те, що ви також можете зробити це за допомогою будь-якого варіанту кнопки:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<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>
</div>
Кнопка розділення
Подібним чином створюйте спадні списки розділених кнопок із практично тією самою розміткою, що й розкривні списки з однією кнопкою, але з додаванням .dropdown-toggle-split
для правильного інтервалу навколо розкривного меню.
Ми використовуємо цей додатковий клас, щоб зменшити горизонталь padding
з обох боків каретки на 25% і видалити те margin-left
, що додається для звичайних розкривних кнопок. Ці додаткові зміни зберігають каретку в центрі розділеної кнопки та забезпечують відповідніший розмір області влучення поряд із основною кнопкою.
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<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>
</div>
Розміри
Розкривні списки кнопок працюють із кнопками будь-якого розміру, включаючи стандартні та розділені розкривні кнопки.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Напрямки
Dropup
Викликайте спадні меню над елементами шляхом додавання .dropup
до батьківського елемента.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
Запускайте спадні меню праворуч від елементів шляхом додавання .dropright
до батьківського елемента.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropleft
Запускайте спадні меню ліворуч від елементів, додаючи .dropleft
до батьківського елемента.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
Пункти меню
Історично вміст спадного меню мав бути посиланнями, але це вже не стосується версії 4. Тепер ви можете додатково використовувати <button>
елементи у своїх спадних меню замість просто <a>
s.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<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>
Ви також можете створювати неінтерактивні спадні елементи за допомогою .dropdown-item-text
. Не соромтеся додавати додаткові стилі за допомогою спеціальних CSS або текстових утиліт.
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<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>
Активний
Додайте .active
до елементів у спадному меню, щоб надати їм статус активних .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Вимкнено
Додайте .disabled
до елементів у випадаючому списку, щоб оформити їх як вимкнені .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Вирівнювання меню
За замовчуванням спадне меню автоматично розташовується на 100% від верхнього краю та вздовж лівого боку батьківського меню. Додайте .dropdown-menu-right
до a, .dropdown-menu
щоб вирівняти спадне меню праворуч.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</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>
Чуйне вирівнювання
Якщо ви хочете використовувати адаптивне вирівнювання, вимкніть динамічне позиціонування, додавши data-display="static"
атрибут, і використовуйте адаптивні класи варіацій.
Щоб вирівняти спадне меню за заданою точкою зупину або більшою, додайте .dropdown-menu{-sm|-md|-lg|-xl}-right
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-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>
Щоб вирівняти спадне меню ліворуч із заданою точкою зупину або більшою, додайте .dropdown-menu-right
та .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<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>
Зауважте, що вам не потрібно додавати data-display="static"
атрибут до кнопок розкривного меню на панелях навігацій, оскільки Popper не використовується в панелях навігацій.
Зміст меню
Заголовки
Додайте заголовок, щоб позначити розділи дій у будь-якому спадному меню.
<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>
текст
Розмістіть будь-який текст довільної форми в спадному меню з текстом і використовуйте утиліти для створення інтервалів . Зауважте, що вам, ймовірно, знадобляться додаткові стилі розміру, щоб обмежити ширину меню.
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
Форми
Розмістіть форму в розкривному меню або перетворіть її в спадне меню та скористайтеся утилітами полів або відступів, щоб надати їй необхідний негативний простір.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Параметри, що випадають
Використовуйте data-offset
або data-reference
, щоб змінити розташування спадного списку.
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<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>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<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>
</div>
</div>
Використання
За допомогою атрибутів даних або JavaScript плагін спадного меню перемикає прихований вміст (випадаючі меню), перемикаючи .show
клас на батьківському .dropdown-menu
. Атрибут data-toggle="dropdown"
використовується для закриття спадних меню на рівні програми, тому доцільно використовувати його завжди.
$.noop
)
mouseover
обробники до безпосередніх дочірніх
<body>
елементів елемента. Цей, безсумнівно, потворний хак необхідний для вирішення проблеми з
делегуванням подій iOS , яка в іншому випадку перешкоджала б запуску коду, який закриває спадне меню, будь-де за межами спадного меню. Після закриття спадного меню ці додаткові пусті
mouseover
обробники видаляються.
Через атрибути даних
Додайте data-toggle="dropdown"
до посилання або кнопку, щоб увімкнути спадне меню.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Через JavaScript
Виклик спадних меню через JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
все ще потрібно
Незалежно від того, викликаєте ви розкривне меню за допомогою JavaScript чи натомість використовуєте data-api, data-toggle="dropdown"
завжди має бути присутнім у тригерному елементі розкривного меню.
Опції
Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-
, як у data-offset=""
.
Ім'я | Тип | За замовчуванням | опис |
---|---|---|---|
зсув | номер | рядок | функція | 0 | Зсув спадного списку відносно його цілі. Коли функція використовується для визначення зсуву, вона викликається з об’єктом, що містить дані зсуву як перший аргумент. Функція повинна повертати об’єкт з такою ж структурою. Вузол DOM тригерного елемента передається як другий аргумент. Для отримання додаткової інформації зверніться до офсетної документації Поппера . |
фліп | логічний | правда | Дозволити спадному меню перевертатися у разі перекриття опорного елемента. Для отримання додаткової інформації зверніться до перегорнутих документів Поппера . |
межа | рядок | елемент | 'scrollParent' | Межа обмеження переповнення спадного меню. Приймає значення 'viewport' , 'window' , 'scrollParent' або посилання HTMLElement (тільки для JavaScript). Для отримання додаткової інформації зверніться до документів PreventOverflow Поппера . |
посилання | рядок | елемент | 'перемикач' | Посилальний елемент спадного меню. Приймає значення 'toggle' , 'parent' або посилання HTMLElement. Для отримання додаткової інформації зверніться до ReferenceObject docs Поппера . |
дисплей | рядок | "динамічний" | За замовчуванням ми використовуємо Popper для динамічного позиціонування. Вимкніть це за допомогою static . |
popperConfig | нуль | об'єкт | нуль | Щоб змінити конфігурацію Bootstrap за замовчуванням Popper, перегляньте конфігурацію Popper |
Зауважте, що якщо boundary
встановлено будь-яке значення, відмінне від 'scrollParent'
, стиль position: static
застосовується до .dropdown
контейнера.
методи
метод | опис |
---|---|
$().dropdown('toggle') |
Перемикає спадне меню певної панелі навігації або навігації з вкладками. |
$().dropdown('show') |
Показує спадне меню певної панелі навігації або навігації з вкладками. |
$().dropdown('hide') |
Приховує спадне меню певної навігаційної панелі або вкладок. |
$().dropdown('update') |
Оновлює положення спадного меню елемента. |
$().dropdown('dispose') |
Знищує спадне меню елемента. |
Події
Усі події, що випадають, запускаються в .dropdown-menu
батьківському елементі і мають relatedTarget
властивість, значенням якої є перемикаючий прив’язний елемент. hide.bs.dropdown
і hidden.bs.dropdown
події мають clickEvent
властивість (тільки якщо вихідний тип події — click
), яка містить об’єкт події для події клацання.
Подія | опис |
---|---|
show.bs.dropdown |
Ця подія запускається негайно, коли викликається метод екземпляра show. |
shown.bs.dropdown |
Ця подія запускається, коли спадне меню стає видимим для користувача (чекатиме завершення переходів CSS). |
hide.bs.dropdown |
Ця подія запускається негайно після виклику методу примірника hide. |
hidden.bs.dropdown |
Ця подія запускається, коли спадне меню закінчується приховуванням від користувача (чекатиме завершення переходів CSS). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})