Pudotusvalikosta
Vaihda kontekstuaaliset peittokuvat linkkiluetteloiden ja muiden näyttämiseksi Bootstrap-pudotusvalikon avulla.
Yleiskatsaus
Avattavat valikot ovat vaihdettavissa, kontekstuaaliset peittokuvat linkkiluetteloiden näyttämiseen ja paljon muuta. Ne on tehty interaktiivisiksi mukana tulevalla Bootstrap-pudotusvalikon JavaScript-laajennuksella. Ne vaihdetaan napsauttamalla, ei viemällä hiiri; tämä on tahallinen suunnittelupäätös .
Avattavat valikot perustuvat kolmannen osapuolen Popper -kirjastoon, joka tarjoaa dynaamisen paikantamisen ja näkymän havaitsemisen. Muista lisätä popper.min.js ennen Bootstrapin JavaScriptiä tai käyttää bootstrap.bundle.min.js
/ bootstrap.bundle.js
joka sisältää Popperin. Popperia ei kuitenkaan käytetä navigointipalkkien pudotusvalikoiden sijoittamiseen, koska dynaamista paikannusta ei tarvita.
Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js
.
Esteettömyys
WAI ARIA -standardi määrittelee varsinaisen role="menu"
widgetin , mutta tämä on ominaista sovellusmaisille valikoille, jotka käynnistävät toimintoja tai toimintoja. ARIA -valikot voivat sisältää vain valikkokohtia, valintaruutuvalikkokohteita, valintanappivalikkokohtia, valintanappiryhmiä ja alivalikoita.
Bootstrapin pudotusvalikot on toisaalta suunniteltu yleisiksi ja soveltuvaksi erilaisiin tilanteisiin ja merkintärakenteisiin. On esimerkiksi mahdollista luoda avattavia valikoita, jotka sisältävät lisäsyötteitä ja lomakeohjausobjekteja, kuten hakukenttiä tai kirjautumislomakkeita. Tästä syystä Bootstrap ei odota (ei lisää automaattisesti) mitään todellisten ARIA - valikoiden edellyttämistä role
ja -määritteistä. Kirjoittajien on sisällytettävä nämä tarkemmat attribuutit itse.aria-
Bootstrap kuitenkin lisää sisäänrakennetun tuen useimmille tavallisille näppäimistövalikon vuorovaikutuksille, kuten mahdollisuuden liikkua yksittäisten .dropdown-item
elementtien välillä kohdistinnäppäimillä ja sulkea valikko ESCnäppäimellä.
Esimerkkejä
Kääri avattavan valikon kytkin (painike tai linkki) ja avattava valikko sisään .dropdown
tai muuhun elementtiin, joka ilmoittaa position: relative;
. Pudotusvalikot voidaan laukaista <a>
tai <button>
elementeistä, jotka sopivat paremmin mahdollisiin tarpeisiisi.
Yksi painike
Mikä tahansa single .btn
voidaan muuttaa pudotusvalikon vaihtokytkimeksi muutamilla merkintämuutoksilla. Näin voit laittaa ne toimimaan jommankumman <button>
elementin kanssa:
<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>
elementeillä:
<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>
Parasta on, että voit tehdä tämän myös millä tahansa painikeversiolla:
<!-- 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>
Split-painike
Samoin voit luoda jaetun painikkeen avattavia valikoita, joissa on käytännössä samat merkinnät kuin yhden painikkeen avattavat valikot, mutta lisäämällä .dropdown-toggle-split
oikean välin pudotusvalikon ympärille.
Käytämme tätä ylimääräistä luokkaa pienentämään vaakasuoraa padding
kennon kummallakin puolella 25 % ja poistamaan margin-left
tavallisiin painikkeiden pudotusvalikoihin lisätyn. Nämä lisämuutokset pitävät pisteen keskitettynä jakopainikkeessa ja tarjoavat sopivamman kokoisen osumaalueen pääpainikkeen viereen.
<!-- 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>
Mitoitus
Painikkeiden avattavat valikot toimivat kaikenkokoisten painikkeiden kanssa, mukaan lukien oletusarvoiset ja jaetut avattavat painikkeet.
<!-- 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>
Ohjeet
Pudotus
Aktivoi avattavat valikot elementtien yläpuolella lisäämällä .dropup
ne yläelementtiin.
<!-- 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
Laukaise avattavat valikot elementtien oikealla puolella lisäämällä .dropright
ne pääelementtiin.
<!-- 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
Laukaise avattavat valikot elementtien vasemmalla puolella lisäämällä .dropleft
ne pääelementtiin.
<!-- 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>
Valikkokohteet
Historiallisesti pudotusvalikon sisällön piti olla linkkejä, mutta se ei ole enää versiossa 4. Nyt voit valinnaisesti käyttää <button>
elementtejä pudotusvalikoissasi pelkän <a>
s:n sijaan.
<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>
Voit myös luoda ei-interaktiivisia avattavia kohteita .dropdown-item-text
. Voit vapaasti muokata tyyliä lisää mukautettujen CSS- tai tekstiapuohjelmien avulla.
<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>
Aktiivinen
Lisää .active
kohteita avattavassa valikossa muokataksesi niitä aktiivisiksi .
<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>
Liikuntarajoitteinen
Lisää .disabled
kohteita avattavassa valikossa muokataksesi ne käytöstä poistetuiksi .
<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>
Valikon tasaus
Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Lisää .dropdown-menu-right
a .dropdown-menu
-kohtaan oikealle tasaa avattava valikko.
<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>
Responsiivinen kohdistus
Jos haluat käyttää reagoivaa tasausta, poista dynaaminen paikannus käytöstä lisäämällä data-display="static"
attribuutti ja käytä responsiivisia muunnelmaluokkia.
Tasaa avattava valikko oikealle annettuun tai suurempaan keskeytyskohtaan lisäämällä .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>
Tasaa vasemmalle avattava valikko tietyn tai suuremman keskeytyskohdan kanssa lisäämällä .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>
Huomaa, että sinun ei tarvitse lisätä data-display="static"
attribuuttia navigointipalkkien pudotusvalikon painikkeisiin, koska Popperia ei käytetä navigointipalkissa.
Valikon sisältö
Otsikot
Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.
<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>
Jakajat
Erottele toisiinsa liittyvien valikkokohtien ryhmät jakajalla.
<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>
Teksti
Sijoita vapaamuotoinen teksti tekstiä sisältävään pudotusvalikkoon ja käytä välilyöntejä . Huomaa, että tarvitset todennäköisesti lisää kokotyylejä valikon leveyden rajoittamiseksi.
<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>
Lomakkeet
Lisää lomake avattavaan valikkoon tai tee siitä avattava valikko ja käytä marginaali- tai täyteapuohjelmia antaaksesi sille tarvitsemasi negatiivinen tila.
<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>
Pudotusvalikon vaihtoehdot
Käytä data-offset
tai data-reference
vaihtaaksesi pudotusvalikon sijaintia.
<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>
Käyttö
Tietomääritteiden tai JavaScriptin avulla avattava laajennus vaihtaa piilotettua sisältöä (pudotusvalikot) vaihtamalla .show
luokkaa ylätason kohdalla .dropdown-menu
. Attribuuttia data-toggle="dropdown"
käytetään sovellustason pudotusvalikoiden sulkemiseen, joten on hyvä idea käyttää sitä aina.
$.noop
)
mouseover
käsittelijät
<body>
elementin välittömiin lapsiin. Tämä kieltämättä ruma hakkerointi on välttämätön
iOS-tapahtuman delegoinnin omituisuuden kiertämiseksi , mikä muuten estäisi napautusta missään avattavan valikon ulkopuolella käynnistämästä koodia, joka sulkee avattavan valikon. Kun pudotusvalikko on suljettu, nämä ylimääräiset tyhjät
mouseover
käsittelijät poistetaan.
Tietomääritteiden kautta
Lisää data-toggle="dropdown"
linkkiin tai painikkeeseen avataksesi avattavan valikon.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScriptin kautta
Kutsu avattavat valikot JavaScriptin kautta:
$('.dropdown-toggle').dropdown()
data-toggle="dropdown"
edelleen vaaditaan
Riippumatta siitä, kutsutko avattavaa valikkoa JavaScriptin kautta vai käytätkö sen sijaan data-api:tä, data-toggle="dropdown"
sen on aina oltava läsnä avattavan valikon triggerelementissä.
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-
, kuten kohdassa data-offset=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
offset | numero | merkkijono | toiminto | 0 | Pudotusvalikon poikkeama suhteessa tavoitteeseen. Kun funktiota käytetään määrittämään siirtymä, sitä kutsutaan objektilla, joka sisältää offset-tiedot ensimmäisenä argumenttina. Funktion on palautettava objekti, jolla on sama rakenne. Liipaisuelementin DOM-solmu välitetään toisena argumenttina. Lisätietoja on Popperin offset-dokumenteissa . |
voltti | boolean | totta | Anna pudotusvalikon kääntyä, jos viiteelementti on päällekkäin. Lisätietoja on Popperin flip-dokumenteissa . |
rajaa | merkkijono | elementti | 'scrollParent' | Avattavan valikon ylivuotorajoitusraja. Hyväksyy arvot 'viewport' , 'window' , 'scrollParent' , tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popperin preventOverflow -dokumenteissa . |
viite | merkkijono | elementti | 'vaihda' | Pudotusvalikon viiteelementti. Hyväksyy arvot 'toggle' , 'parent' , tai HTMLElement-viittauksen. Lisätietoja on Popperin referenssijulkaisussaObject docs . |
näyttö | merkkijono | 'dynaaminen' | Oletusarvoisesti käytämme Popperia dynaamiseen paikannukseen. Poista tämä käytöstä käyttämällä static . |
popperConfig | nolla | esine | tyhjä | Jos haluat muuttaa Bootstrapin Popperin oletusasetuksia, katso Popperin asetukset |
Huomaa, kun boundary
arvoksi on asetettu jokin muu arvo kuin 'scrollParent'
, tyyliä position: static
käytetään .dropdown
säilöön.
menetelmät
Menetelmä | Kuvaus |
---|---|
$().dropdown('toggle') |
Vaihtaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon. |
$().dropdown('show') |
Näyttää tietyn navigointipalkin tai välilehtinavigoinnin avattavan valikon. |
$().dropdown('hide') |
Piilottaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon. |
$().dropdown('update') |
Päivittää elementin avattavan valikon sijainnin. |
$().dropdown('dispose') |
Tuhoaa elementin pudotusvalikon. |
Tapahtumat
Kaikki pudotusvalikon tapahtumat käynnistetään .dropdown-menu
pääelementissä, ja niillä on relatedTarget
ominaisuus, jonka arvo on vaihto-ankkurielementti. hide.bs.dropdown
ja hidden.bs.dropdown
tapahtumilla on clickEvent
ominaisuus (vain kun alkuperäinen tapahtumatyyppi on click
), joka sisältää napsautustapahtuman Tapahtumaobjektin.
Tapahtuma | Kuvaus |
---|---|
show.bs.dropdown |
Tämä tapahtuma käynnistyy välittömästi, kun show-instanssimenetelmää kutsutaan. |
shown.bs.dropdown |
Tämä tapahtuma käynnistyy, kun pudotusvalikko on näkyvissä käyttäjälle (odottaa CSS-siirtymien valmistumista). |
hide.bs.dropdown |
Tämä tapahtuma käynnistyy välittömästi, kun piiloilmentymämenetelmä on kutsuttu. |
hidden.bs.dropdown |
Tämä tapahtuma käynnistyy, kun avattava valikko on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})