Выпадальныя спісы
Пераключайце кантэкстныя накладкі для адлюстравання спісаў спасылак і многае іншае з дапамогай выпадальнага плагіна Bootstrap.
Агляд
Выпадаючыя спісы - гэта кантэкстныя накладкі, якія можна пераключаць, для адлюстравання спісаў спасылак і іншага. Яны зроблены інтэрактыўнымі з уключаным плагінам Bootstrap для выпадальнага меню JavaScript. Яны пераключаюцца націскам, а не навядзеннем; гэта наўмыснае дызайнерскае рашэнне .
Выпадаючыя спісы створаны на аснове старонняй бібліятэкі Popper , якая забяспечвае дынамічнае пазіцыянаванне і выяўленне вокны прагляду. Не забудзьцеся ўключыць popper.min.js перад JavaScript Bootstrap або выкарыстоўваць bootstrap.bundle.min.js
/ bootstrap.bundle.js
, які змяшчае Popper. Popper не выкарыстоўваецца для размяшчэння выпадаючых спісаў у панэлі навігацыі, хоць дынамічнае пазіцыянаванне не патрабуецца.
Даступнасць
Стандарт WAI ARIA вызначае фактычны role="menu"
віджэт , але гэта адносіцца да прыкладных меню, якія запускаюць дзеянні або функцыі. Меню ARIA могуць утрымліваць толькі пункты меню, пункты меню сцяжкоў, пункты меню перамыкачоў, групы перамыкачоў і падменю.
Выпадаючыя спісы Bootstrap, з іншага боку, распрацаваны як агульныя і дастасавальныя да розных сітуацый і структур разметкі. Напрыклад, можна ствараць выпадальныя спісы, якія змяшчаюць дадатковыя ўводы і элементы кіравання формамі, такія як палі пошуку або формы ўваходу. Па гэтай прычыне Bootstrap не чакае (і не дадае аўтаматычна) ніякіх атрыбутаў role
і , неабходных для сапраўдных меню ARIA . Аўтары самі павінны ўключыць гэтыя больш канкрэтныя атрыбуты.aria-
Тым не менш, Bootstrap сапраўды дадае ўбудаваную падтрымку большасці стандартных узаемадзеянняў з меню клавіятуры, такіх як магчымасць перамяшчацца па асобных .dropdown-item
элементах з дапамогай клавіш курсора і закрываць меню з дапамогай ESCклавішы.
Прыклады
Абгарніце перамыкач выпадальнага меню (вашу кнопку або спасылку) і выпадальнае меню ў .dropdown
або іншы элемент, які абвяшчае position: relative;
. Выпадаючыя спісы можна выклікаць з <a>
або <button>
элементаў, каб лепш адпавядаць вашым патэнцыяльным патрэбам. Прыклады, паказаныя тут, выкарыстоўваюць семантычныя <ul>
элементы, дзе гэта неабходна, але карыстальніцкая разметка падтрымліваецца.
Адзіная кнопка
Любы сінгл .btn
можна ператварыць у выпадальны пераключальнік з некаторымі зменамі разметкі. Вось як вы можаце прымусіць іх працаваць з адным з <button>
элементаў:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
І з <a>
элементамі:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Самае лепшае, што вы таксама можаце зрабіць гэта з дапамогай любой кнопкі:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Праклейванне
Выпадаючыя спісы кнопак працуюць з кнопкамі ўсіх памераў, уключаючы кнопкі па змаўчанні і падзеленыя выпадальныя кнопкі.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Large button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Small button
</button>
<ul class="dropdown-menu">
...
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Цёмныя выпадальныя меню
Выберыце больш цёмныя выпадаючыя спісы ў адпаведнасці з цёмнай навігацыйнай панэллю або карыстальніцкі стыль, дадаўшы .dropdown-menu-dark
да існуючага .dropdown-menu
. Ніякіх змяненняў у выпадальных элементах не патрабуецца.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
І пакласці яго для выкарыстання ў панэлі навігацыі:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Напрамкі
RTL
Напрамкі адлюстроўваюцца пры выкарыстанні Bootstrap у RTL, што азначае, што .dropstart
яны з'явяцца справа.
Выпадзенне
Запускайце выпадальныя меню над элементамі шляхам дадання .dropup
да бацькоўскага элемента.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</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-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Дропрайт
Запусціце выпадальныя меню справа ад элементаў, дадаўшы .dropend
іх да бацькоўскага элемента.
<!-- Default dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropend button -->
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary">
Split dropend
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Кропля ўлева
Запускайце выпадальныя меню злева ад элементаў шляхам дадання .dropstart
да бацькоўскага элемента.
<!-- Default dropstart button -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<!-- Split dropstart button -->
<div class="btn-group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropstart</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Пункты меню
Вы можаце выкарыстоўваць элементы <a>
або <button>
ў якасці выпадальных элементаў.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Вы таксама можаце ствараць неінтэрактыўныя выпадальныя элементы з дапамогай .dropdown-item-text
. Не саромейцеся ствараць дадатковыя стылі з дапамогай карыстацкіх CSS або тэкставых утыліт.
<ul class="dropdown-menu">
<li><span class="dropdown-item-text">Dropdown item text</span></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
Актыўны
Дадайце .active
да элементаў у выпадальным меню, каб аформіць іх як актыўныя . Каб перадаць дапаможным тэхналогіям актыўны стан, выкарыстоўвайце aria-current
атрыбут — выкарыстоўваючы page
значэнне для бягучай старонкі або true
для бягучага элемента ў наборы.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Інваліды
Дадайце .disabled
элементы ў выпадальным спісе, каб аформіць іх як адключаныя .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Выраўноўванне меню
Па змаўчанні выпадаючае меню аўтаматычна размяшчаецца на 100% зверху і ўздоўж левага боку бацькоўскага меню. Вы можаце змяніць гэта з дапамогай накіраваных .drop*
класаў, але вы таксама можаце кіраваць імі з дапамогай дадатковых класаў-мадыфікатараў.
Дадайце .dropdown-menu-end
да .dropdown-menu
выраўноўвання выпадальнага меню па правым краі. Напрамкі адлюстроўваюцца пры выкарыстанні Bootstrap у RTL, гэта значыць .dropdown-menu-end
з'явіцца злева.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu example
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Адаптыўнае выраўноўванне
Калі вы хочаце выкарыстоўваць адаптыўнае выраўноўванне, адключыце дынамічнае пазіцыянаванне, дадаўшы data-bs-display="static"
атрыбут, і выкарыстоўвайце адаптыўныя класы варыяцый.
Каб выраўнаваць выпадаючае меню з дадзенай кропкай прыпынку або большай, дадайце.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Каб выраўнаваць левае выпадальнае меню з дадзенай кропкай перапынку або большай, дадайце .dropdown-menu-end
і .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Звярніце ўвагу, што вам не трэба дадаваць data-bs-display="static"
атрыбут да кнопак выпадальных спісаў у панэлі навігацыі, паколькі Popper не выкарыстоўваецца ў панэлі навігацыі.
Варыянты выраўноўвання
Узяўшы большасць варыянтаў, паказаных вышэй, вось невялікая дэманстрацыя кухоннай ракавіны з рознымі варыянтамі выраўноўвання выпадальнага меню ў адным месцы.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned, right-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Right-aligned, left-aligned lg
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropstart
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropend
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Змест меню
Загалоўкі
Дадайце загаловак, каб пазначыць раздзелы дзеянняў у любым выпадальным меню.
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Dropdown header</h6></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
Раздзяляльнікі
Падзяліце групы звязаных пунктаў меню падзельнікам.
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
Тэкст
Змесціце любы тэкст свабоднай формы ў выпадальнае меню з тэкстам і выкарыстоўвайце ўтыліты для размяшчэння інтэрвалаў . Звярніце ўвагу, што вам, верагодна, спатрэбяцца дадатковыя стылі памераў, каб абмежаваць шырыню меню.
<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="mb-3">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-3">
<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="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="mb-3">
<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-bs-offset
або .data-bs-reference
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
Паводзіны аўтаматычнага закрыцця
Па змаўчанні выпадальнае меню зачыняецца пры пстрычцы ўнутры або па-за межамі выпадальнага меню. Вы можаце выкарыстоўваць autoClose
опцыю, каб змяніць паводзіны выпадальнага меню.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
Сас
Пераменныя
Зменныя для ўсіх выпадальных меню:
$dropdown-min-width: 10rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: .5rem;
$dropdown-spacer: .125rem;
$dropdown-font-size: $font-size-base;
$dropdown-color: $body-color;
$dropdown-bg: $white;
$dropdown-border-color: rgba($black, .15);
$dropdown-border-radius: $border-radius;
$dropdown-border-width: $border-width;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: $spacer * .5;
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
$dropdown-link-hover-color: shade-color($gray-900, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
$dropdown-link-active-bg: $component-active-bg;
$dropdown-link-disabled-color: $gray-500;
$dropdown-item-padding-y: $spacer * .25;
$dropdown-item-padding-x: $spacer;
$dropdown-header-color: $gray-600;
$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;
Зменныя для цёмнага выпадальнага меню :
$dropdown-dark-color: $gray-300;
$dropdown-dark-bg: $gray-800;
$dropdown-dark-border-color: $dropdown-border-color;
$dropdown-dark-divider-bg: $dropdown-divider-bg;
$dropdown-dark-box-shadow: null;
$dropdown-dark-link-color: $dropdown-dark-color;
$dropdown-dark-link-hover-color: $white;
$dropdown-dark-link-hover-bg: rgba($white, .15);
$dropdown-dark-link-active-color: $dropdown-link-active-color;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color: $gray-500;
Зменныя для карэткі на аснове CSS, якія паказваюць інтэрактыўнасць выпадальнага меню:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Міксіны
Міксіны выкарыстоўваюцца для стварэння карэткі на аснове CSS і могуць быць знойдзены ў scss/mixins/_caret.scss
.
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-end {
border-top: $caret-width solid transparent;
border-right: 0;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-start {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
margin-left: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@if $direction == down {
@include caret-down();
} @else if $direction == up {
@include caret-up();
} @else if $direction == end {
@include caret-end();
}
}
@if $direction == start {
&::after {
display: none;
}
&::before {
display: inline-block;
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
content: "";
@include caret-start();
}
}
&:empty::after {
margin-left: 0;
}
}
}
Выкарыстанне
З дапамогай атрыбутаў дадзеных або JavaScript плагін выпадальнага меню пераключае схаваны кантэнт (выпадаючыя меню), пераключаючы .show
клас на бацькоўскім .dropdown-menu
. Атрыбут data-bs-toggle="dropdown"
выкарыстоўваецца для закрыцця выпадаючых меню на ўзроўні прыкладанняў, таму добра выкарыстоўваць яго заўсёды.
mouseover
апрацоўшчыкі да непасрэдных даччыных
<body>
элементаў элемента. Гэты пачварны хак неабходны, каб абыйсці
дзівацтвы ў дэлегаванні падзей у iOS , якія ў адваротным выпадку перашкодзяць націсканню дзе-небудзь па-за выпадальным спісам выклікаць код, які закрывае выпадальны спіс. Пасля закрыцця выпадальнага меню гэтыя дадатковыя пустыя
mouseover
апрацоўшчыкі выдаляюцца.
Праз атрыбуты дадзеных
Дадайце data-bs-toggle="dropdown"
да спасылкі або кнопкі, каб пераключыць выпадальны спіс.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
Праз JavaScript
Выклік выпадаючых меню праз JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
яшчэ патрабуецца
Незалежна ад таго, выклікаеце вы выпадальны спіс праз JavaScript або замест гэтага выкарыстоўваеце data-api, data-bs-toggle="dropdown"
ён заўсёды павінен прысутнічаць у спускавым элеменце выпадальнага меню.
Параметры
Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-
, як у data-bs-offset=""
. Не забудзьцеся змяніць тып рэгістра назвы опцыі з camelCase на kebab-case пры перадачы опцый праз атрыбуты даных. Напрыклад, замест выкарыстання data-bs-autoClose="false"
выкарыстоўвайце data-bs-auto-close="false"
.
Імя | Тып | Па змаўчанні | Апісанне |
---|---|---|---|
boundary |
радок | элемент | 'clippingParents' |
Мяжа абмежавання перапаўнення выпадальнага меню (прымяняецца толькі да мадыфікатара preventOverflow Попера). Па змаўчанні гэта 'clippingParents' і можа прымаць спасылку HTMLElement (толькі праз JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да дакументаў Popper's detectOverflow . |
reference |
радок | элемент | аб'ект | 'toggle' |
Спасылкавы элемент выпадальнага меню. Прымае значэнні 'toggle' , 'parent' , спасылкі HTMLElement або аб'екта, які забяспечвае getBoundingClientRect . Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі канструктара Popper і дакументацыі віртуальных элементаў . |
display |
радок | 'dynamic' |
Па змаўчанні мы выкарыстоўваем Popper для дынамічнага пазіцыянавання. Адключыце гэта з дапамогай static . |
offset |
масіў | радок | функцыя | [0, 2] |
Зрушэнне выпадальнага меню адносна мэты. Вы можаце перадаць радок у атрыбутах дадзеных са значэннямі, падзеленымі коскамі, напрыклад: Калі функцыя выкарыстоўваецца для вызначэння зрушэння, яна выклікаецца з аб'ектам, які змяшчае размяшчэнне попера, спасылку і прамастаянні попера ў якасці першага аргумента. Запускаючы элемент DOM вузел перадаецца ў якасці другога аргумента. Функцыя павінна вяртаць масіў з двума лікамі: . Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера . |
autoClose |
лагічны | радок | true |
Наладзьце паводзіны аўтаматычнага закрыцця выпадальнага меню:
|
popperConfig |
нуль | аб'ект | функцыя | null |
Каб змяніць стандартную канфігурацыю Popper для Bootstrap, глядзіце канфігурацыю Popper . Калі функцыя выкарыстоўваецца для стварэння канфігурацыі Popper, яна выклікаецца з аб'ектам, які змяшчае канфігурацыю Popper па змаўчанні Bootstrap. Гэта дапаможа вам выкарыстоўваць і аб'яднаць стандартную канфігурацыю з вашай уласнай канфігурацыяй. Функцыя павінна вяртаць аб'ект канфігурацыі для Popper. |
Выкарыстанне функцыі зpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Метады
Метад | Апісанне |
---|---|
toggle |
Пераключае выпадальнае меню дадзенай панэлі навігацыі або навігацыі з укладкамі. |
show |
Паказвае выпадальнае меню дадзенай панэлі навігацыі або навігацыі з укладкамі. |
hide |
Хавае выпадальнае меню дадзенай панэлі навігацыі або навігацыі з укладкамі. |
update |
Абнаўляе пазіцыю выпадальнага меню элемента. |
dispose |
Знішчае выпадальны спіс элемента. (Выдаляе захаваныя даныя ў элеменце DOM) |
getInstance |
Статычны метад, які дазваляе атрымаць асобнік выпадальнага меню, звязаны з элементам DOM, вы можаце выкарыстоўваць яго так:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Статычны метад, які вяртае асобнік выпадальнага меню, звязаны з элементам DOM, або стварае новы ў выпадку, калі ён не быў ініцыялізаваны. Вы можаце выкарыстоўваць гэта так:bootstrap.Dropdown.getOrCreateInstance(element) |
Падзеі
Усе падзеі, якія выпадаюць, запускаюцца ў элемент пераключэння, а потым узнікаюць. Такім чынам, вы таксама можаце дадаць слухачы падзей да .dropdown-menu
бацькоўскага элемента. hide.bs.dropdown
і hidden.bs.dropdown
падзеі маюць clickEvent
уласцівасць (толькі калі зыходны тып падзеі click
), якая змяшчае аб'ект падзеі для падзеі пстрычкі.
Метад | Апісанне |
---|---|
show.bs.dropdown |
Спрацоўвае неадкладна пры выкліку метаду паказу экземпляра. |
shown.bs.dropdown |
Запускаецца, калі выпадальнае меню стала бачным для карыстальніка і пераходы CSS завершаны. |
hide.bs.dropdown |
Спрацоўвае неадкладна, калі быў выкліканы метад схаванага асобніка. |
hidden.bs.dropdown |
Выклікаецца, калі выпадальнае меню перастае быць схаваным ад карыстальніка і пераходы CSS завершаны. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})