Випадаючі списки

Перемикайте контекстні накладення для відображення списків посилань тощо за допомогою розкривного плагіна Bootstrap.

Огляд

Випадаючі меню – це контекстні накладки, які можна перемикати, для відображення списків посилань тощо. Вони стають інтерактивними за допомогою плагіна JavaScript, що випадає, Bootstrap. Вони перемикаються клацанням, а не наведенням; це навмисне дизайнерське рішення.

Випадаючі списки побудовані на сторонній бібліотеці Popper.js , яка забезпечує динамічне позиціонування та визначення вікна перегляду. Обов’язково включіть popper.min.js перед JavaScript Bootstrap або використовуйте bootstrap.bundle.min.js/ bootstrap.bundle.js, який містить Popper.js. Popper.js не використовується для розміщення розкривних списків у навігаційних панелях, хоча динамічне позиціонування не потрібне.

Якщо ви створюєте наш 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" 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="#" role="button" 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>

Найкраще те, що ви також можете зробити це за допомогою будь-якого варіанту кнопки:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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" 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до a, .dropdown-menuщоб вирівняти спадне меню праворуч.

Голови вгору! Випадаючі списки розташовуються завдяки Popper.js (за винятком випадків, коли вони містяться на панелі навігації).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

Додайте заголовок, щоб позначити розділи дій у будь-якому спадному меню.

<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">
  <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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Додайте .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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Використання

За допомогою атрибутів даних або JavaScript плагін спадного списку перемикає прихований вміст (випадаючі меню), перемикаючи .showклас у елементі батьківського списку. Атрибут data-toggle="dropdown"використовується для закриття спадних меню на рівні програми, тому доцільно завжди використовувати його.

На сенсорних пристроях відкриття спадного меню додає порожні ( $.noop) mouseoverобробники до безпосередніх дочірніх <body>елементів елемента. Цей, безсумнівно, потворний хак необхідний для вирішення проблеми з делегуванням подій iOS , яка в іншому випадку не дозволяла б активувати код, який закриває спадне меню, натиснувши будь-де за межами спадного меню. Після закриття спадного меню ці додаткові пусті mouseoverобробники видаляються.

Через атрибути даних

Додайте data-toggle="dropdown"до посилання або кнопку, щоб увімкнути спадне меню.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Через JavaScript

Виклик спадних меню через JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`все ще потрібно

Незалежно від того, викликаєте ви розкривне меню за допомогою JavaScript чи натомість використовуєте data-api, data-toggle="dropdown"завжди має бути присутнім у тригерному елементі розкривного меню.

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-offset="".

Ім'я	Тип	За замовчуванням	опис
зсув	номер \| рядок \| функція	0	Зсув спадного списку відносно його цілі. Для отримання додаткової інформації зверніться до офсетної документації Popper.js .
фліп	логічний	правда	Дозволити спадному списку перевертатися у разі перекриття опорного елемента. Для отримання додаткової інформації зверніться до перевернутих документів Popper.js .
межа	рядок \| елемент	'scrollParent'	Межа обмеження переповнення спадного меню. Приймає значення `'viewport'`, `'window'`, `'scrollParent'`або посилання HTMLElement (тільки для JavaScript). Для отримання додаткової інформації зверніться до документів PreventOverflow Popper.js .

Зауважте, що якщо boundaryвстановлено будь-яке значення, відмінне від 'scrollParent', стиль position: staticзастосовується до .dropdownконтейнера.

методи

метод	опис
`$().dropdown('toggle')`	Перемикає спадне меню певної панелі навігації або навігації з вкладками.
`$().dropdown('update')`	Оновлює положення спадного меню елемента.
`$().dropdown('dispose')`	Знищує спадне меню елемента.

Події

Усі події, що випадають, запускаються в .dropdown-menuбатьківському елементі і мають relatedTargetвластивість, значенням якої є перемикаючий прив’язний елемент.

Подія	опис
`show.bs.dropdown`	Ця подія запускається негайно, коли викликається метод екземпляра show.
`shown.bs.dropdown`	Ця подія запускається, коли спадне меню стає видимим для користувача (чекатиме завершення переходів CSS).
`hide.bs.dropdown`	Ця подія запускається негайно після виклику методу примірника hide.
`hidden.bs.dropdown`	Ця подія запускається, коли спадне меню закінчується приховуванням від користувача (чекатиме завершення переходів CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Випадаючі списки

Огляд

Доступність

Приклади

Випадаючі меню з однією кнопкою

Розділені кнопки, що випадають

Розмір

Варіація Dropup

Варіація Dropright

Варіація Dropleft

Пункти меню

Вирівнювання меню

Заголовки меню

Роздільники меню

Форми меню

Активні пункти меню

Вимкнені пункти меню

Використання

Через атрибути даних

Через JavaScript

`data-toggle="dropdown"`все ще потрібно

Опції

методи

Події

Випадаючі списки

Огляд

Доступність

Приклади

Випадаючі меню з однією кнопкою

Розділені кнопки, що випадають

Розмір

Варіація Dropup

Варіація Dropright

Варіація Dropleft

Пункти меню

Вирівнювання меню

Заголовки меню

Розкривний заголовок

Роздільники меню

Форми меню

Активні пункти меню

Вимкнені пункти меню

Використання

Через атрибути даних

Через JavaScript

data-toggle="dropdown"все ще потрібно

Опції

методи

Події

`data-toggle="dropdown"`все ще потрібно