Source

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.

Yksi painike

Mikä tahansa single .btnvoidaan muuttaa pudotusvalikon vaihtokytkimeksi muutamilla merkintämuutoksilla. Näin voit laittaa ne toimimaan jommankumman <button>elementin kanssa:

Toiminta Toinen toimenpide Jotain muuta tässä 
<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ä:

Toiminta Toinen toimenpide Jotain muuta tässä 
<div class="dropdown">
  <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:

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<!-- 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>

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

Käytämme tätä ylimääräistä luokkaa pienentämään vaakasuoraa paddingkennon kummallakin puolella 25 % ja poistamaan margin-lefttavallisiin painikkeiden pudotusvalikoihin lisätyn. Nämä lisämuutokset pitävät pisteen keskitettynä jakopainikkeessa ja tarjoavat sopivamman kokoisen osumaalueen pääpainikkeen viereen.

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<!-- 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>

Ohjeet

Pudotus

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

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<!-- 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

Laukaise avattavat valikot elementtien oikealla puolella lisäämällä .droprightne pääelementtiin.

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<!-- 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

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

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<!-- 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>

Voit myös luoda ei-interaktiivisia avattavia kohteita .dropdown-item-text. Voit vapaasti muokata tyyliä lisää mukautettujen CSS- tai tekstiapuohjelmien avulla.

Avattavan kohteen teksti Toiminta Toinen toimenpide Jotain muuta tässä 
<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ää .activekohteita avattavassa valikossa muokataksesi niitä aktiivisiksi .

Säännöllinen linkki Aktiivinen linkki Toinen linkki 
<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ää .disabledkohteita avattavassa valikossa muokataksesi ne käytöstä poistetuiksi .

Säännöllinen linkki Linkki poistettu käytöstä Toinen linkki 
<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>

Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. 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>

Valikon sisältö

Otsikot

Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.

Pudotusvalikon otsikko
Toiminta Toinen toimenpide 
<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.

Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<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.

Jotain esimerkkitekstiä, joka kulkee vapaasti avattavassa valikossa.

Ja tämä on enemmän esimerkkitekstiä.

<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.

Uusi täällä? Kirjaudu Unohtuiko salasana? 
<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>

Käytä data-offsettai data-referencevaihtaaksesi pudotusvalikon sijaintia.

Toiminta Toinen toimenpide Jotain muuta tässä
Toiminta Toinen toimenpide Jotain muuta tässä
Erillinen linkki 
<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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 .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 avattavan valikon 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-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 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 .
viite merkkijono | elementti 'vaihda' Pudotusvalikon viiteelementti. Hyväksyy arvot 'toggle', 'parent', tai HTMLElement-viittauksen. Lisätietoja on Popper.js:n referenssiobjektidokumenteissa .
näyttö merkkijono 'dynaaminen' Oletusarvoisesti käytämme Popper.js:ää dynaamiseen paikannukseen. Poista tämä käytöstä käyttämällä static.

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. hide.bs.dropdownja hidden.bs.dropdowntapahtumilla on clickEventominaisuus (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…
})