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 kirjastoon Popper.js , 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.jsjoka sisältää Popper.js:n. Popper.js:ää ei kuitenkaan käytetä avattavien valikoiden sijoittamiseen navigointipalkeissa, 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ä koskee vain sovellusmaisia valikoita, 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ä roleja -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-itemelementtien 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 .dropdowntai muuhun elementtiin, joka ilmoittaa position: relative;. Pudotusvalikot voidaan laukaista <a>tai <button>elementeistä, jotka sopivat paremmin mahdollisiin tarpeisiisi.

Yhden painikkeen pudotusvalikot

Mikä tahansa single .btnvoidaan 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" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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 show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-haspopup="true" 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>

Jakopainikkeen pudotusvalikot

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-splitoikean välin pudotusvalikon ympärille.

Käytämme tätä ylimääräistä luokkaa pienentämään vaakasuoraa vaakasuoraa paddingtäplän kummallakin puolella 25 % ja poistamaan margin-lefttavallisiin painikkeiden pudotusvalikoihin lisätyn. Nämä lisämuutokset pitävät merkin 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Dropup-variaatio

Laukaise avattavat valikot elementtien yläpuolella lisäämällä .dropupne yläelementtiin.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright-variaatio

Laukaise avattavat valikot elementtien oikealla puolella lisäämällä .droprightemoelementtiin.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft-variaatio

Laukaise avattavat valikot elementtien vasemmalla puolella lisäämällä .dropleftne yläelementtiin.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 % yläreunasta ja ylätason vasemmasta reunasta. Lisää .dropdown-menu-righta .dropdown-menu-kohtaan oikealle tasaa avattava valikko.

Varoitus! Pudotusvalikot sijoitetaan Popper.js:n ansiosta (paitsi silloin, kun ne sisältyvät navigointipalkkiin).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

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>

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>

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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Lisää .activekohteita 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>

Lisää .disabledkohteita 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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Käyttö

Tietomääritteiden tai JavaScriptin avulla avattava laajennus vaihtaa piilotettua sisältöä (pudotusvalikot) vaihtamalla .showluokkaa ylätason luettelokohteessa. Attribuuttia data-toggle="dropdown"käytetään sovellustason pudotusvalikoiden sulkemiseen, joten on hyvä idea käyttää sitä aina.

Kosketuskäyttöisissä laitteissa pudotusvalikon avaaminen lisää tyhjät ( $.noop) mouseoverkäsittelijät <body>elementin välittömiin lapsiin. Tämä kieltämättä ruma hakkerointi on välttämätön iOS:n tapahtumadelegaatioon liittyvän omituisuuden kiertämiseksi , mikä muuten estäisi kosketusta 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 mouseoverkäsittelijät poistetaan.

Tietomääritteiden kautta

Lisää data-toggle="dropdown"linkkiin tai painikkeeseen avataksesi avattavan valikon.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </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. Lisätietoja on Popper.js:n offset-dokumenteissa .
voltti	boolean	totta	Anna pudotusvalikon kääntyä, jos viiteelementti on päällekkäin. Lisätietoja on Popper.js:n flip-dokumenteissa .
rajaa	merkkijono \| elementti	'scrollParent'	Avattavan valikon ylivuotorajoitusraja. Hyväksyy arvot `'viewport'`, `'window'`, `'scrollParent'`, tai HTMLElement-viittauksen (vain JavaScript). Lisätietoja on Popper.js:n preventOverflow-dokumenteissa .

Huomaa, kun boundaryarvoksi on asetettu jokin muu arvo kuin 'scrollParent', tyyliä position: statickäytetään .dropdownsäilöön.

menetelmät

Menetelmä	Kuvaus
`$().dropdown('toggle')`	Vaihtaa 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-menupääelementissä, ja niillä on relatedTargetominaisuus, jonka arvo on vaihto-ankkurielementti.

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…
})

Pudotusvalikosta

Yleiskatsaus

Esteettömyys

Esimerkkejä

Yhden painikkeen pudotusvalikot

Jakopainikkeen pudotusvalikot

Mitoitus

Dropup-variaatio

Dropright-variaatio

Dropleft-variaatio

Valikkokohteet

Valikon tasaus

Valikkojen otsikot

Valikon jakajat

Valikkolomakkeet

Aktiiviset valikon kohdat

Poistetut valikon kohdat

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

`data-toggle="dropdown"`edelleen vaaditaan

Vaihtoehdot

menetelmät

Tapahtumat

Pudotusvalikosta

Yleiskatsaus

Esteettömyys

Esimerkkejä

Yhden painikkeen pudotusvalikot

Jakopainikkeen pudotusvalikot

Mitoitus

Dropup-variaatio

Dropright-variaatio

Dropleft-variaatio

Valikkokohteet

Valikon tasaus

Valikkojen otsikot

Pudotusvalikon otsikko

Valikon jakajat

Valikkolomakkeet

Aktiiviset valikon kohdat

Poistetut valikon kohdat

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

data-toggle="dropdown"edelleen vaaditaan

Vaihtoehdot

menetelmät

Tapahtumat

`data-toggle="dropdown"`edelleen vaaditaan