Nolaižamās izvēlnes
Pārslēdziet kontekstuālos pārklājumus, lai parādītu saišu sarakstus un citus, izmantojot Bootstrap nolaižamo spraudni.
Pārskats
Nolaižamās izvēlnes ir pārslēdzamas, kontekstuāli pārklājumi, lai parādītu saišu sarakstus un daudz ko citu. Tie ir padarīti interaktīvi, izmantojot iekļauto Bootstrap nolaižamo JavaScript spraudni. Tie tiek pārslēgti, noklikšķinot, nevis virzot kursoru; tas ir apzināts dizaina lēmums .
Nolaižamās izvēlnes ir izveidotas, pamatojoties uz trešās puses bibliotēku Popper , kas nodrošina dinamisku pozicionēšanu un skata loga noteikšanu. Noteikti iekļaujiet popper.min.js pirms Bootstrap JavaScript vai izmantojiet bootstrap.bundle.min.js
/ bootstrap.bundle.js
kas satur Popper. Popper netiek izmantots, lai pozicionētu nolaižamās izvēlnes navigācijas joslās, jo dinamiskā pozicionēšana nav nepieciešama.
Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js
.
Pieejamība
WAI ARIA standarts definē faktisko role="menu"
logrīku , taču tas attiecas tikai uz lietojumprogrammām līdzīgām izvēlnēm, kas aktivizē darbības vai funkcijas . ARIA izvēlnēs var būt tikai izvēlnes vienumi, izvēles rūtiņu izvēlnes vienumi, radio pogu izvēlnes vienumi, radio pogu grupas un apakšizvēlnes.
No otras puses, Bootstrap nolaižamās izvēlnes ir izstrādātas tā, lai tās būtu vispārīgas un piemērotas dažādām situācijām un iezīmēšanas struktūrām. Piemēram, ir iespējams izveidot nolaižamās izvēlnes, kas satur papildu ievades un veidlapas vadīklas, piemēram, meklēšanas laukus vai pieteikšanās veidlapas. Šī iemesla dēļ Bootstrap neparedz (nedz arī automātiski nepievieno) nevienu no role
un aria-
atribūtiem, kas nepieciešami patiesajām ARIA izvēlnēm. Autoriem pašiem būs jāiekļauj šie specifiskākie atribūti.
Tomēr Bootstrap pievieno iebūvētu atbalstu lielākajai daļai standarta tastatūras izvēlņu mijiedarbības, piemēram, iespēju pārvietoties pa atsevišķiem .dropdown-item
elementiem, izmantojot kursora taustiņus, un aizvērt izvēlni ar ESCtaustiņu.
Piemēri
Aptiniet nolaižamās izvēlnes slēdzi (jūsu pogu vai saiti) un nolaižamo izvēlni .dropdown
vai citu elementu, kas deklarē position: relative;
. Nolaižamās izvēlnes var tikt aktivizētas no <a>
vai <button>
elementiem, lai labāk atbilstu jūsu potenciālajām vajadzībām.
Viena poga
Jebkuru singlu .btn
var pārvērst par nolaižamo slēdzi, veicot dažas iezīmēšanas izmaiņas. Tālāk ir norādīts, kā varat tos izmantot ar kādu no <button>
elementiem.
<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>
Un ar <a>
elementiem:
<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>
Labākā daļa ir tāda, ka to varat izdarīt arī ar jebkuru pogas variantu:
<!-- 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>
Sadalīšanas poga
Līdzīgi izveidojiet sadalīto pogu nolaižamās izvēlnes ar gandrīz tādu pašu marķējumu kā vienas pogas nolaižamajiem izvēlnēm, taču pievienojot .dropdown-toggle-split
pareizu atstarpi ap nolaižamo sarakstu.
Mēs izmantojam šo papildu klasi, lai par 25% samazinātu horizontālo padding
līmeni abās pakāpju pusēs un noņemtu margin-left
parasto pogu nolaižamo izvēlni. Šīs papildu izmaiņas saglabā centrējumu sadalīšanas pogā un nodrošina atbilstošāka izmēra trāpījuma apgabalu blakus galvenajai pogai.
<!-- 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>
Izmēru noteikšana
Pogu nolaižamās izvēlnes darbojas ar visu izmēru pogām, tostarp noklusējuma un sadalītajām nolaižamajām pogām.
<!-- 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>
Norādes
Dropup
Aktivizējiet nolaižamās izvēlnes virs elementiem, pievienojot .dropup
to vecākajam elementam.
<!-- 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
Aktivizējiet nolaižamās izvēlnes elementu labajā pusē, pievienojot .dropright
to vecākajam elementam.
<!-- 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
Aktivizējiet nolaižamās izvēlnes elementu kreisajā pusē, pievienojot .dropleft
to vecākajam elementam.
<!-- 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>
Izvēlnes vienumi
Vēsturiski nolaižamās izvēlnes saturam bija jābūt saitēm, taču tas vairs neattiecas uz versiju 4. Tagad nolaižamajos izvēlnēs varat izmantot <button>
elementus, nevis tikai <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>
Varat arī izveidot neinteraktīvus nolaižamās izvēlnes vienumus, izmantojot .dropdown-item-text
. Jūtieties brīvi turpināt stilu, izmantojot pielāgotas CSS vai teksta utilītas.
<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>
Aktīvs
Pievienojiet .active
vienumiem nolaižamajā izvēlnē, lai veidotu tos kā aktīvus .
<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>
Atspējots
Pievienojiet .disabled
vienumiem nolaižamajā izvēlnē, lai veidotu tos kā atspējotus .
<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>
Izvēlņu izlīdzināšana
Pēc noklusējuma nolaižamā izvēlne tiek automātiski novietota 100% no augšdaļas un tās vecākvārda kreisajā pusē. Pievienot nolaižamajā izvēlnē .dropdown-menu-right
līdzi pa labi..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>
Atsaucīga izlīdzināšana
Ja vēlaties izmantot adaptīvo līdzināšanu, atspējojiet dinamisko pozicionēšanu, pievienojot data-display="static"
atribūtu, un izmantojiet adaptīvās variācijas klases.
Lai līdzinātu nolaižamo izvēlni pa labi ar norādīto pārtraukuma punktu vai lielāku, pievienojiet .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>
Lai līdzinātu kreiso nolaižamo izvēlni ar norādīto vai lielāku pārtraukuma punktu, pievienojiet .dropdown-menu-right
un .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>
Ņemiet vērā, ka navigācijas joslu nolaižamajām pogām nav jāpievieno data-display="static"
atribūts, jo Popper navigācijas joslās netiek izmantots.
Izvēlnes saturs
Virsraksti
Pievienojiet galveni, lai apzīmētu darbību sadaļas jebkurā nolaižamajā izvēlnē.
<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>
Dalītāji
Atdaliet saistīto izvēlnes vienumu grupas ar dalītāju.
<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>
Teksts
Ievietojiet jebkuru brīvas formas tekstu nolaižamajā izvēlnē ar tekstu un izmantojiet atstarpju utilītas . Ņemiet vērā, ka, iespējams, būs nepieciešami papildu izmēru stili, lai ierobežotu izvēlnes platumu.
<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>
Veidlapas
Ievietojiet veidlapu nolaižamajā izvēlnē vai izveidojiet to par nolaižamo izvēlni un izmantojiet piemales vai polsterējuma utilītas , lai piešķirtu tai nepieciešamo negatīvo vietu.
<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>
Nolaižamās izvēlnes opcijas
Izmantojiet data-offset
vai data-reference
, lai mainītu nolaižamās izvēlnes atrašanās vietu.
<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>
Lietošana
Izmantojot datu atribūtus vai JavaScript, nolaižamais spraudnis pārslēdz slēpto saturu (nolaižamās izvēlnes), pārslēdzot .show
klasi uz vecāku .dropdown-menu
. Atribūts data-toggle="dropdown"
tiek izmantots, lai aizvērtu nolaižamās izvēlnes lietojumprogrammas līmenī, tāpēc ieteicams to izmantot vienmēr.
$.noop
)
apdarinātāji . Šī, protams, neglītā uzlaušana ir nepieciešama, lai
novērstu iOS notikumu deleģēšanas dīvainību , kas pretējā gadījumā neļautu, pieskaroties nekur ārpus nolaižamās izvēlnes, aktivizētu kodu, kas aizver nolaižamo izvēlni. Kad nolaižamā izvēlne ir aizvērta, šie papildu tukšie
apstrādātāji tiek noņemti.
mouseover
<body>
mouseover
Izmantojot datu atribūtus
Pievienojiet data-toggle="dropdown"
saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Izmantojot JavaScript
Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
joprojām ir nepieciešams
Neatkarīgi no tā, vai izsaucat nolaižamo izvēlni, izmantojot JavaScript vai tā vietā izmantojat datu api, data-toggle="dropdown"
nolaižamās izvēlnes aktivizētāja elementā vienmēr ir jābūt klāt.
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-
, tāpat kā data-offset=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
kompensēt | numurs | stīga | funkciju | 0 | Nolaižamās izvēlnes nobīde attiecībā pret tās mērķi. Ja funkcija tiek izmantota, lai noteiktu nobīdi, tā tiek izsaukta ar objektu, kas satur nobīdes datus kā savu pirmo argumentu. Funkcijai ir jāatgriež objekts ar tādu pašu struktūru. Aktivizējošais elements DOM mezgls tiek nodots kā otrais arguments. Papildinformāciju skatiet Poppera nobīdes dokumentos . |
uzsist | Būla | taisnība | Ļaujiet nolaižamajai izvēlnei apgriezties, ja atsauces elements pārklājas. Lai iegūtu papildinformāciju, skatiet Popper's Flip docs . |
robeža | stīga | elements | 'scrollParent' | Nolaižamās izvēlnes pārpildes ierobežojuma robeža. Pieņem vērtības 'viewport' , 'window' , 'scrollParent' vai HTMLElement atsauci (tikai JavaScript). Lai iegūtu papildinformāciju, skatiet Popper's preventOverflow dokumentus . |
atsauce | stīga | elements | 'pārslēgt' | Nolaižamās izvēlnes atsauces elements. Pieņem 'toggle' , 'parent' , vai HTMLElement atsauces vērtības. Papildinformāciju skatiet Popera atsaucēObject docs . |
displejs | stīga | 'dinamisks' | Pēc noklusējuma mēs izmantojam Popper dinamiskai pozicionēšanai. Atspējojiet to ar static . |
popperConfig | null | objektu | null | Lai mainītu Bootstrap noklusējuma Popper konfigurāciju, skatiet Popper konfigurāciju |
Ņemiet vērā, ja boundary
ir iestatīta vērtība, kas nav 'scrollParent'
, stils position: static
tiek lietots .dropdown
konteineram.
Metodes
Metode | Apraksts |
---|---|
$().dropdown('toggle') |
Pārslēdz noteiktās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
$().dropdown('show') |
Parāda noteiktas navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
$().dropdown('hide') |
Slēp attiecīgās navigācijas joslas vai cilnes navigācijas nolaižamo izvēlni. |
$().dropdown('update') |
Atjaunina elementa nolaižamās izvēlnes pozīciju. |
$().dropdown('dispose') |
Iznīcina elementa nolaižamo izvēlni. |
Pasākumi
Visi nolaižamā saraksta notikumi tiek aktivizēti .dropdown-menu
vecākelementā, un tiem ir relatedTarget
rekvizīts, kura vērtība ir pārslēgšanas enkura elements. hide.bs.dropdown
un hidden.bs.dropdown
notikumiem ir clickEvent
rekvizīts (tikai tad, ja sākotnējais notikuma veids ir click
), kas satur klikšķa notikuma notikuma objektu.
Pasākums | Apraksts |
---|---|
show.bs.dropdown |
Šis notikums tiek aktivizēts nekavējoties, kad tiek izsaukta parādīšanas instances metode. |
shown.bs.dropdown |
Šis notikums tiek aktivizēts, kad nolaižamā izvēlne ir padarīta redzama lietotājam (tiks gaidīts, līdz CSS pārejas tiks pabeigtas). |
hide.bs.dropdown |
Šis notikums tiek aktivizēts nekavējoties, kad tiek izsaukta slēpšanas instances metode. |
hidden.bs.dropdown |
Šis notikums tiek aktivizēts, kad nolaižamā izvēlne ir paslēpta no lietotāja (tiks gaidīts, kamēr CSS pārejas tiks pabeigtas). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})