Rippmenüüd
Lülitage kontekstipõhiseid ülekatteid linkide loendite ja muu kuvamiseks Bootstrapi rippmenüü pistikprogrammiga.
Ülevaade
Rippmenüüd on vahetatavad, kontekstipõhised ülekatted linkide loendite kuvamiseks ja palju muud. Need on interaktiivsed kaasasoleva Bootstrapi rippmenüü JavaScripti pistikprogrammiga. Neid vahetatakse klõpsates, mitte hõljutades; see on tahtlik disainiotsus .
Rippmenüüd on üles ehitatud kolmanda osapoole teegile Popper , mis pakub dünaamilist positsioneerimist ja vaateava tuvastamist. Lisage kindlasti popper.min.js enne Bootstrapi JavaScripti või kasutage bootstrap.bundle.min.js
/ bootstrap.bundle.js
mis sisaldab Popperit. Popperit ei kasutata navigeerimisribade rippmenüüde positsioneerimiseks, kuna dünaamiline positsioneerimine pole vajalik.
Kui loote meie JavaScripti allikast, nõuabutil.js
see .
Juurdepääsetavus
WAI ARIA standard määratleb tegeliku vidinarole="menu"
, kuid see on spetsiifiline rakenduslike menüüde jaoks, mis käivitavad toiminguid või funktsioone. ARIA menüüd võivad sisaldada ainult menüüüksusi, märkeruutude menüüüksusi, raadionuppude menüüüksusi, raadionupurühmi ja alammenüüsid.
Bootstrapi rippmenüüd on seevastu loodud üldiseks ja rakendatavaks mitmesugustes olukordades ja märgistusstruktuurides. Näiteks on võimalik luua rippmenüüd, mis sisaldavad täiendavaid sisendeid ja vormi juhtelemente, nagu otsinguvälju või sisselogimisvorme. Sel põhjusel ei oota Bootstrap (ega lisa automaatselt) ühtegi tõelise ARIA menüü jaoks vajalikke atribuute role
ja . Autorid peavad need täpsemad atribuudid ise lisama.aria-
Siiski lisab Bootstrap sisseehitatud toe enamiku standardsete klaviatuurimenüü interaktsioonide jaoks, nagu näiteks võimalus .dropdown-item
kursoriklahvide abil üksikute elementide vahel liikuda ja klahviga menüü sulgeda ESC.
Näited
Pakkige rippmenüü lüliti (oma nupp või link) ja rippmenüü sisse .dropdown
või muusse elemendisse, mis deklareerib position: relative;
. Rippmenüüd saab käivitada <a>
või <button>
elementidest, et need vastaksid paremini teie potentsiaalsetele vajadustele.
Üksik nupp
Mis tahes singlit .btn
saab mõne märgistuse muudatusega muuta rippmenüü lülitiks. Siin on, kuidas saate neid mõlema <button>
elemendiga tööle panna.
<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>
Ja <a>
elementidega:
<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>
Parim osa on see, et saate seda teha ka mis tahes nupu variandiga:
<!-- 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>
Jagamisnupp
Sarnaselt looge jagatud nuppude rippmenüüd, millel on peaaegu sama märgistus kui ühe nupu rippmenüüd, kuid lisades .dropdown-toggle-split
rippmenüü tähise ümber õige vahekauguse.
Kasutame seda lisaklassi, et vähendada horisontaali padding
mõlemal küljel 25% ja eemaldada margin-left
tavaliste nuppude rippmenüüde jaoks lisatud. Need lisamuudatused hoiavad tähise jaotusnupu keskel ja pakuvad põhinupu kõrval sobivama suurusega löögiala.
<!-- 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>
Suuruse määramine
Nuppude rippmenüüd töötavad igas suuruses nuppudega, sealhulgas vaike- ja jagatud rippmenüü nuppudega.
<!-- 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>
Juhised
Kukkumine
Käivitage rippmenüüd elementide kohal, lisades .dropup
need emaelemendile.
<!-- 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
Käivitage rippmenüüd elementide paremal, lisades .dropright
need emaelemendile.
<!-- 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
Käivitage elementide vasakul rippmenüüd, lisades .dropleft
need emaelemendile.
<!-- 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>
Menüüelemendid
Ajalooliselt pidi rippmenüü sisu olema lingid, kuid versiooni 4 puhul see enam nii ei kehti. Nüüd saate valikuliselt kasutada <button>
rippmenüüdes elemente, mitte ainult <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>
Saate luua ka mitteinteraktiivseid rippmenüü üksusi, kasutades .dropdown-item-text
. Stiilige julgelt kohandatud CSS-i või tekstiutiliitidega.
<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>
Aktiivne
Lisage .active
rippmenüü üksustele, et kujundada need aktiivseteks .
<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>
Keelatud
Lisage .disabled
rippmenüüs olevatele üksustele, et kujundada need keelatuks .
<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>
Menüü joondamine
Vaikimisi positsioneeritakse rippmenüü automaatselt 100% ülaosast ja vanema vasakust servast. Rippmenüü lisamine paremale joondamiseks .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>
Tundlik joondus
Kui soovite kasutada kohanduvat joondamist, keelake dünaamiline positsioneerimine, lisades data-display="static"
atribuudi ja kasutage kohanduvaid variatsiooniklasse.
Rippmenüü paremale joondamiseks antud või suurema katkestuspunktiga lisage .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>
Vasakpoolse rippmenüü joondamiseks antud või suurema katkestuspunktiga lisage .dropdown-menu-right
ja .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>
Pange tähele, et te ei pea data-display="static"
navigeerimisribade rippmenüü nuppudele atribuuti lisama, kuna Popperit navigeerimisribadel ei kasutata.
Menüü sisu
Päised
Lisage päis mis tahes rippmenüü tegevuste jaotistele.
<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>
Jagajad
Eraldage seotud menüüelementide rühmad jaguriga.
<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>
Tekst
Asetage mis tahes vabas vormis tekst tekstiga rippmenüüsse ja kasutage tühikute utiliite . Pange tähele, et tõenäoliselt vajate menüü laiuse piiramiseks täiendavaid suuruse stiile.
<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>
Vormid
Pange vorm rippmenüüsse või muutke see rippmenüüks ja kasutage veerise või polsterduse utiliite , et anda sellele vajalik negatiivne ruum.
<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>
Rippmenüü valikud
Kasutage rippmenüü asukoha muutmiseks data-offset
või .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>
Kasutamine
Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) ümber, lülitades .show
klassi ülemüksusel .dropdown-menu
. Atribuuti data-toggle="dropdown"
kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.
$.noop
)
töötlejad. See ilmselt inetu häkkimine on vajalik
iOS-i sündmuste delegeerimise veidruse ületamiseks, mis muidu takistaks rippmenüüst väljaspool asuvat puudutust käivitamast rippmenüü sulgevat koodi. Kui rippmenüü suletakse,
eemaldatakse need täiendavad tühjad käitlejad.
mouseover
<body>
mouseover
Andmeatribuutide kaudu
Lisage data-toggle="dropdown"
lingile või nupule rippmenüü sisselülitamiseks.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScripti kaudu
Kutsuge rippmenüüd JavaScripti kaudu:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
ikka nõutud
Olenemata sellest, kas helistate rippmenüüsse JavaScripti kaudu või kasutate selle asemel andmeapi-d, data-toggle="dropdown"
peab rippmenüü päästikuelemendil alati olema.
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-offset=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
nihe | number | string | funktsiooni | 0 | Rippmenüü nihe sihtmärgi suhtes. Kui funktsiooni kasutatakse nihke määramiseks, kutsutakse see esile objektiga, mis sisaldab esimese argumendina nihkeandmeid. Funktsioon peab tagastama sama struktuuriga objekti. Käivitav element DOM-sõlm edastatakse teise argumendina. Lisateabe saamiseks vaadake Popperi nihkedokumente . |
klapp | tõeväärtus | tõsi | Luba rippmenüül ümber pöörata, kui võrdluselement kattub. Lisateabe saamiseks vaadake Popperi flip docs'i . |
piiri | string | element | 'scrollParent' | Rippmenüü ülevoolupiirangu piir. Aktsepteerib 'viewport' , 'window' , 'scrollParent' , või HTMLElementi viite väärtusi (ainult JavaScript). Lisateabe saamiseks vaadake Popperi preventOverflow dokumente . |
viide | string | element | 'lülita' | Rippmenüü viiteelement. Aktsepteerib 'toggle' , 'parent' , või HTMLElementi viite väärtused. Lisateabe saamiseks vaadake Popperi viideObject docs . |
kuva | string | 'dünaamiline' | Vaikimisi kasutame dünaamilise positsioneerimise jaoks Popperit. Keela see rakendusega static . |
popperConfig | null | objektiks | null | Bootstrapi Popperi vaikekonfiguratsiooni muutmiseks vaadake Popperi konfiguratsiooni |
Pange tähele, kui boundary
väärtuseks on määratud mis tahes muu väärtus peale , rakendatakse 'scrollParent'
stiil konteinerile.position: static
.dropdown
meetodid
meetod | Kirjeldus |
---|---|
$().dropdown('toggle') |
Lülitab antud navigeerimisriba või vahelehtedega navigeerimise rippmenüü sisse- ja väljalülitamiseks. |
$().dropdown('show') |
Näitab antud navigeerimisriba või vahekaartidega navigeerimise rippmenüüd. |
$().dropdown('hide') |
Peidab antud navigeerimisriba või vahekaartidega navigeerimise rippmenüü. |
$().dropdown('update') |
Värskendab elemendi rippmenüü asukohta. |
$().dropdown('dispose') |
Hävitab elemendi rippmenüü. |
Sündmused
Kõik rippmenüü sündmused käivitatakse .dropdown-menu
ülemelemendis ja neil on relatedTarget
atribuut, mille väärtus on lülitusankurelement. hide.bs.dropdown
ja hidden.bs.dropdown
sündmustel on clickEvent
atribuut (ainult siis, kui algne sündmuse tüüp on click
), mis sisaldab klõpsusündmuse sündmuseobjekti.
Sündmus | Kirjeldus |
---|---|
show.bs.dropdown |
See sündmus käivitub kohe, kui kutsutakse näitamise eksemplari meetod. |
shown.bs.dropdown |
See sündmus käivitatakse, kui rippmenüü on kasutajale nähtavaks tehtud (ootab CSS-i üleminekuid, et lõpetada). |
hide.bs.dropdown |
See sündmus käivitatakse kohe, kui peida eksemplari meetod on välja kutsutud. |
hidden.bs.dropdown |
See sündmus käivitatakse, kui rippmenüü on kasutaja eest peitmise lõpetanud (ootab CSS-i üleminekuid, et lõpetada). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})