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

Перемикайте контекстні накладення для відображення списків посилань тощо за допомогою розкривного плагіна 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">
  <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>

Ви також можете створювати неінтерактивні спадні елементи за допомогою .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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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>

Чуйне вирівнювання

Якщо ви хочете використовувати адаптивне вирівнювання, вимкніть динамічне позиціонування, додавши 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-haspopup="true" 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-haspopup="true" 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.js не використовується в панелях навігацій.

Заголовки

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

<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" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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клас у батьківському елементі списку. Атрибут 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 .
посилання	рядок \| елемент	'перемикач'	Посилальний елемент спадного меню. Приймає значення `'toggle'`, `'parent'`або посилання HTMLElement. Для отримання додаткової інформації зверніться до документів referenceObject Popper.js .
дисплей	рядок	"динамічний"	За замовчуванням ми використовуємо Popper.js для динамічного позиціонування. Вимкніть це за допомогою `static`.

Зауважте, що якщо 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…
})

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

Огляд

Доступність

Приклади

Одна кнопка

Кнопка розділення

Розміри

Напрямки

Dropup

Dropright

Dropleft

Пункти меню

Активний

Вимкнено

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

Чуйне вирівнювання

Зміст меню

Заголовки

Роздільники

текст

Форми

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

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

Через JavaScript

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

Опції

методи

Події

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

Огляд

Доступність

Приклади

Одна кнопка

Кнопка розділення

Розміри

Напрямки

Dropup

Dropright

Dropleft

Пункти меню

Активний

Вимкнено

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

Чуйне вирівнювання

Зміст меню

Заголовки

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

Роздільники

текст

Форми

Параметри, що випадають

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

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

Через JavaScript

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

Опції

методи

Події

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