padajuće liste

Uključite/isključite kontekstualne preklapanja za prikaz popisa poveznica i više s Bootstrap padajućim dodatkom.

Pregled

Padajući izbori su kontekstualni slojevi koji se mogu mijenjati za prikaz popisa veza i više. Interaktivni su s uključenim Bootstrap padajućim JavaScript dodatkom. Prebacuju se klikom, a ne lebdenjem; ovo je namjerna dizajnerska odluka.

Padajući izbori izgrađeni su na biblioteci treće strane, Popper.js , koja pruža dinamičko pozicioniranje i otkrivanje okvira za prikaz. Obavezno uključite popper.min.js prije Bootstrapovog JavaScripta ili koristite bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper.js. Popper.js se ne koristi za pozicioniranje padajućih izbornika u navigacijskim trakama iako dinamičko pozicioniranje nije potrebno.

Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .

Pristupačnost

Standard WAI ARIA definira stvarni role="menu"widget , ali to je specifično za izbornike slične aplikacijama koji pokreću akcije ili funkcije. ARIA izbornici mogu sadržavati samo stavke izbornika, stavke izbornika potvrdnih okvira, stavke izbornika radio gumba, grupe radio gumba i podizbornike.

Bootstrapovi padajući izbornici, s druge strane, dizajnirani su da budu generički i primjenjivi na različite situacije i strukture označavanja. Na primjer, moguće je stvoriti padajuće izbornike koji sadrže dodatne unose i kontrole obrazaca, kao što su polja za pretraživanje ili obrasci za prijavu. Iz tog razloga, Bootstrap ne očekuje (niti automatski dodaje) bilo koji od atributa rolei potrebnih za prave ARIA izbornike. Autori će morati sami uključiti ove specifičnije atribute.aria-

Međutim, Bootstrap dodaje ugrađenu podršku za većinu standardnih interakcija izbornika tipkovnice, kao što je mogućnost kretanja kroz pojedinačne .dropdown-itemelemente pomoću tipki kursora i zatvaranja izbornika pomoću ESCtipke.

Primjeri

Zamotajte prekidač padajućeg izbornika (vaš gumb ili poveznica) i padajući izbornik unutar .dropdownili neki drugi element koji izjavljuje position: relative;. Padajući izbornici mogu se pokrenuti iz <a>ili <button>elemenata kako bi bolje odgovarali vašim potencijalnim potrebama.

Padajući izbornik s jednim gumbom

Bilo koja pojedinačna .btnoznaka može se pretvoriti u padajući izbornik uz neke promjene oznaka. Evo kako ih možete staviti u rad s bilo kojim <button>elementom:

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

I sa <a>elementima:

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

Najbolji dio je što to možete učiniti i s bilo kojom varijantom gumba:

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

Padajući izbornici gumba Split

Slično, stvorite podijeljene padajuće izbornike gumba s gotovo istim označavanjem kao padajući izbornici s jednim gumbom, ali uz dodatak .dropdown-toggle-splitza pravilan razmak oko padajućeg izbornika za umetanje.

Koristimo ovu dodatnu klasu za smanjenje horizontale paddings obje strane kareta za 25% i uklanjanje margin-leftdodanog za uobičajene padajuće gumbe. Te dodatne promjene drže karet u središtu gumba za dijeljenje i pružaju pogodno područje prikladnije veličine pokraj glavnog gumba.

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

Dimenzioniranje

Padajući izbornici gumba rade s gumbima svih veličina, uključujući zadane i podijeljene padajuće gumbe.

<!-- 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 varijacija

Pokreni padajuće izbornike iznad elemenata dodavanjem .dropupnadređenom elementu.

<!-- 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 varijacija

Pokrenite padajuće izbornike s desne strane elemenata dodavanjem .droprightnadređenom elementu.

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

Droplelijeva varijacija

Pokrenite padajuće izbornike s lijeve strane elemenata dodavanjem .dropleftnadređenom elementu.

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

Povijesno gledano, sadržaji padajućeg izbornika morali su biti poveznice, ali to više nije slučaj s v4. Sada po želji možete koristiti <button>elemente u svojim padajućim izbornicima umjesto samo <a>s.

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

Prema zadanim postavkama, padajući izbornik automatski se postavlja 100% od vrha i duž lijeve strane nadređenog izbornika. Dodaj .dropdown-menu-rightna a .dropdown-menuza desno poravnanje padajućeg izbornika.

Glavu gore! Padajući izbornici pozicionirani su zahvaljujući Popper.js (osim kada su sadržani u navigacijskoj traci).

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

Dodajte zaglavlje za označavanje odjeljaka radnji u bilo kojem padajućem izborniku.

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

Grupe povezanih stavki izbornika odvojite razdjelnikom.

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

Stavite obrazac unutar padajućeg izbornika ili ga napravite u padajućem izborniku i upotrijebite pomoćne programe za margine ili ispune da biste mu dali negativni prostor koji vam je potreban.

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

Dodajte .activestavkama na padajućem izborniku da biste ih stilizirali kao aktivne .

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

Dodajte .disabledstavkama na padajućem izborniku da biste ih stilizirali kao onemogućene .

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

Korištenje

Putem atributa podataka ili JavaScripta, padajući dodatak uključuje i isključuje skriveni sadržaj (padajući izbornici) mijenjanjem .showklase na nadređenoj stavci popisa. Atribut data-toggle="dropdown"se koristi za zatvaranje padajućih izbornika na razini aplikacije, stoga je dobra ideja uvijek ga koristiti.

Na uređajima s omogućenim dodirom otvaranje padajućeg izbornika dodaje prazne ( $.noop) mouseoverrukovatelje neposrednim potomcima <body>elementa. Ovaj doduše ružan hack neophodan je da se zaobiđe hir u delegiranju događaja u iOS-u , koji bi inače spriječio da dodir bilo gdje izvan padajućeg izbornika pokrene kod koji zatvara padajući izbornik. Nakon što se padajući izbornik zatvori, ovi dodatni prazni mouseoverrukovatelji se uklanjaju.

Preko atributa podataka

Dodajte data-toggle="dropdown"na vezu ili gumb za prebacivanje padajućeg izbornika.

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

Preko JavaScripta

Pozovite padajuće izbornike putem JavaScripta:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`još uvijek potrebno

Bez obzira na to pozivate li svoj padajući izbornik putem JavaScripta ili umjesto njega koristite data-api, data-toggle="dropdown"uvijek je potrebno biti prisutan na elementu okidača padajućeg izbornika.

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-offset="".

Ime	Tip	Zadano	Opis
pomaknuti	broj \| niz \| funkcija	0	Pomak padajućeg izbornika u odnosu na cilj. Za više informacija pogledajte Popper.js offset dokumente .
okrenuti	Booleov	pravi	Dopustite padajućem izborniku da se okrene u slučaju preklapanja na referentnom elementu. Za više informacija pogledajte flip dokumente Popper.js .
granica	niz \| element	'scrollParent'	Granica ograničenja prelijevanja padajućeg izbornika. Prihvaća vrijednosti `'viewport'`, `'window'`, `'scrollParent'`ili HTMLElement reference (samo JavaScript). Za više informacija pogledajte Popper.js's preventOverflow dokumente .

Napomena: kada boundaryje postavljeno na bilo koju vrijednost osim 'scrollParent', stil position: staticse primjenjuje na .dropdownspremnik.

Metode

metoda	Opis
`$().dropdown('toggle')`	Prebacuje padajući izbornik određene navigacijske trake ili navigacije s karticama.
`$().dropdown('update')`	Ažurira položaj padajućeg izbornika elementa.
`$().dropdown('dispose')`	Uništava padajući izbornik elementa.

Događaji

Svi padajući događaji pokreću se na .dropdown-menunadređenom elementu i imaju relatedTargetsvojstvo čija je vrijednost preklopni element sidra.

Događaj	Opis
`show.bs.dropdown`	Ovaj događaj aktivira se odmah kada se pozove metoda show instance.
`shown.bs.dropdown`	Ovaj se događaj pokreće kada je padajući izbornik učinjen vidljivim korisniku (pričekat će CSS prijelaze da dovrše).
`hide.bs.dropdown`	Ovaj se događaj aktivira odmah nakon pozivanja metode hide instance.
`hidden.bs.dropdown`	Ovaj se događaj pokreće kada se padajući izbornik više ne skriva od korisnika (pričekat će se da CSS prijelazi dovrše).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

padajuće liste

Pregled

Pristupačnost

Primjeri

Padajući izbornik s jednim gumbom

Padajući izbornici gumba Split

Dimenzioniranje

Dropup varijacija

Dropright varijacija

Droplelijeva varijacija

Stavke izbornika

Usklađivanje izbornika

Zaglavlja izbornika

Razdjelnici jelovnika

Obrasci jelovnika

Aktivne stavke izbornika

Onemogućene stavke izbornika

Korištenje

Preko atributa podataka

Preko JavaScripta

`data-toggle="dropdown"`još uvijek potrebno

Mogućnosti

Metode

Događaji

padajuće liste

Pregled

Pristupačnost

Primjeri

Padajući izbornik s jednim gumbom

Padajući izbornici gumba Split

Dimenzioniranje

Dropup varijacija

Dropright varijacija

Droplelijeva varijacija

Stavke izbornika

Usklađivanje izbornika

Zaglavlja izbornika

Padajuće zaglavlje

Razdjelnici jelovnika

Obrasci jelovnika

Aktivne stavke izbornika

Onemogućene stavke izbornika

Korištenje

Preko atributa podataka

Preko JavaScripta

data-toggle="dropdown"još uvijek potrebno

Mogućnosti

Metode

Događaji

`data-toggle="dropdown"`još uvijek potrebno