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.js , mis pakub dünaamilist positsioneerimist ja vaateava tuvastamist. Lisage kindlasti enne Bootstrapi JavaScripti popper.min.js või kasutage /bootstrap.bundle.min.js mis bootstrap.bundle.jssisaldab Popper.js-i. Popper.js-i 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 roleja . 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-itemkursoriklahvide abil üksikute elementide vahel liikuda ja klahviga menüü sulgeda ESC.
Näited
Pakkige rippmenüü lüliti (oma nupp või link) ja rippmenüü sisse .dropdownvõ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 .btnsaab mõne märgistuse muudatusega muuta rippmenüü lülitiks. Siin on, kuidas saate neid mõlema <button>elemendiga tööle panna.
Sarnaselt looge jagatud nuppude rippmenüüd, millel on peaaegu sama märgistus kui ühe nupu rippmenüüd, kuid lisades .dropdown-toggle-splitrippmenüü tähise ümber õige vahekauguse.
Kasutame seda lisaklassi, et vähendada horisontaali paddingmõlemal küljel 25% ja eemaldada margin-lefttavaliste nuppude rippmenüüde jaoks lisatud. Need lisamuudatused hoiavad tähise jaotusnupu keskel ja pakuvad põhinupu kõrval sobivama suurusega löögiala.
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.
Saate luua ka mitteinteraktiivseid rippmenüü üksusi, kasutades .dropdown-item-text. Stiilige julgelt kohandatud CSS-i või tekstiutiliitidega.
Vaikimisi positsioneeritakse rippmenüü automaatselt 100% ülaosast ja vanema vasakust servast. Rippmenüü lisamine paremale joondamiseks .dropdown-menu-right..dropdown-menu
Pea püsti! Rippmenüüd on paigutatud tänu Popper.js-ile (välja arvatud juhul, kui need sisalduvad navigeerimisribal).
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.
Vasakpoolse rippmenüü joondamiseks antud või suurema katkestuspunktiga lisage .dropdown-menu-rightja .dropdown-menu{-sm|-md|-lg|-xl}-left.
Pange tähele, et te ei pea data-display="static"navigeerimisribade rippmenüü nuppudele atribuuti lisama, kuna Popper.js-i navigeerimisribadel ei kasutata.
Menüü sisu
Päised
Lisage päis mis tahes rippmenüü tegevuste jaotistele.
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.
Mõni näidistekst, mis on rippmenüüs vabalt voolav.
Ja see on rohkem näidistekst.
Vormid
Pange vorm rippmenüüsse või muutke see rippmenüüks ja kasutage veerise või polsterduse utiliite , et anda sellele vajalik negatiivne ruum.
Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) sisse, lülitades .showklassi ülemloendi üksusel. Atribuuti data-toggle="dropdown"kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.
Puutetundlike seadmete puhul lisab rippmenüü avamine elemendi vahetutele alamatele tühjad ( $.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.
JavaScripti kaudu
Kutsuge rippmenüüd JavaScripti kaudu:
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 Popper.js'i nihkedokumente .
klapp
tõeväärtus
tõsi
Luba rippmenüül ümber pöörata, kui võrdluselement kattub. Lisateabe saamiseks vaadake Popper.js'i flip-dokumente .
piiri
string | element
'scrollParent'
Rippmenüü ülevoolupiirangu piir. Aktsepteerib 'viewport', 'window', 'scrollParent', või HTMLElementi viite väärtusi (ainult JavaScript). Lisateabe saamiseks vaadake Popper.js'i preventOverflow dokumente .
viide
string | element
'lülita'
Rippmenüü viiteelement. Aktsepteerib 'toggle', 'parent', või HTMLElementi viite väärtused. Lisateabe saamiseks vaadake Popper.js'i viideObject docs .
kuva
string
'dünaamiline'
Vaikimisi kasutame dünaamilise positsioneerimise jaoks Popper.js-i. Keela see rakendusega static.
Pange tähele, kui boundaryvää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 relatedTargetatribuut, mille väärtus on lülitusankurelement. hide.bs.dropdownja hidden.bs.dropdownsündmustel on clickEventatribuut (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).