Выпадальныя спісы
Пераключайце кантэкстныя накладкі для адлюстравання спісаў спасылак і многае іншае з дапамогай выпадальнага плагіна Bootstrap.
Агляд
Выпадаючыя спісы - гэта кантэкстныя накладкі, якія можна пераключаць, для адлюстравання спісаў спасылак і іншага. Яны зроблены інтэрактыўнымі з уключаным плагінам Bootstrap для выпадальнага меню JavaScript. Яны пераключаюцца націскам, а не навядзеннем; гэта наўмыснае дызайнерскае рашэнне .
Выпадаючыя спісы створаны на аснове старонняй бібліятэкі 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
да бацькоўскага элемента.
<!-- 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
іх да бацькоўскага элемента.
<!-- 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
да бацькоўскага элемента.
<!-- 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
да .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 вузел перадаецца ў якасці другога аргумента. Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера . |
перавярнуць | лагічны | праўда | Дазволіць перагортванне выпадальнага меню ў выпадку перакрыцця апорнага элемента. Для атрымання дадатковай інфармацыі звярніцеся да дакументаў Popper's flip . |
мяжа | радок | элемент | 'scrollParent' | Мяжа абмежавання перапаўнення выпадальнага меню. Прымае значэнні 'viewport' , 'window' , 'scrollParent' або спасылку HTMLElement (толькі JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да Popper's preventOverflow дакументацыі . |
спасылка | радок | элемент | "пераключэнне" | Спасылкавы элемент выпадальнага меню. Прымае значэнні 'toggle' , 'parent' , або спасылку HTMLElement. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі ReferenceObject Попера . |
дысплей | радок | "дынамічны" | Па змаўчанні мы выкарыстоўваем Popper для дынамічнага пазіцыянавання. Адключыце гэта з дапамогай static . |
popperConfig | нуль | аб'ект | нуль | Каб змяніць стандартную канфігурацыю Popper Bootstrap, глядзіце канфігурацыю 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 |
Гэта падзея спрацоўвае неадкладна пры выкліку метаду паказу экземпляра. |
shown.bs.dropdown |
Гэта падзея запускаецца, калі выпадальнае меню становіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). |
hide.bs.dropdown |
Гэта падзея запускаецца неадкладна, калі быў выкліканы метад экзэмпляра hide. |
hidden.bs.dropdown |
Гэта падзея запускаецца, калі выпадальнае меню скончана хавацца ад карыстальніка (будзе чакаць завяршэння пераходаў CSS). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})