Spustni meniji

Preklopite kontekstualne prekrivke za prikaz seznamov povezav in več s spustnim vtičnikom Bootstrap.

Pregled

Spustni meniji so preklopni, kontekstualni prekrivki za prikazovanje seznamov povezav in več. Interaktivni so z vključenim spustnim vtičnikom Bootstrap JavaScript. Preklopijo se s klikom, ne z lebdenjem; to je namerna oblikovalska odločitev .

Spustni meniji so zgrajeni na podlagi knjižnice tretje osebe, Popper.js , ki zagotavlja dinamično pozicioniranje in zaznavanje vidnega polja. Ne pozabite vključiti popper.min.js pred JavaScript Bootstrapa ali uporabite bootstrap.bundle.min.js/ bootstrap.bundle.js, ki vsebuje Popper.js. Popper.js se ne uporablja za pozicioniranje spustnih menijev v vrsticah za krmarjenje, čeprav dinamično pozicioniranje ni potrebno.

Če gradite naš JavaScript iz izvorne kode, zahtevautil.js .

Dostopnost

Standard WAI ARIA definira dejanski role="menu"gradnik , vendar je to specifično za menije, podobne aplikacijam, ki sprožijo dejanja ali funkcije. Meniji ARIA lahko vsebujejo samo menijske elemente, menijske elemente potrditvenih polj, menijske elemente izbirnih gumbov, skupine izbirnih gumbov in podmenije.

Po drugi strani pa so spustni meniji Bootstrap zasnovani tako, da so generični in uporabni za različne situacije in strukture označevanja. Na primer, mogoče je ustvariti spustne menije, ki vsebujejo dodatne vnose in kontrolnike obrazcev, kot so iskalna polja ali obrazci za prijavo. Iz tega razloga Bootstrap ne pričakuje (niti samodejno doda) nobenega od atributov rolein , potrebnih za prave menije ARIA . Avtorji bodo morali te bolj specifične lastnosti vključiti sami.aria-

Vendar pa Bootstrap dodaja vgrajeno podporo za večino standardnih interakcij z meniji tipkovnice, kot je možnost premikanja po posameznih .dropdown-itemelementih s smernimi tipkami in zapiranje menija s ESCtipko.

Primeri

Zavijte preklop spustnega menija (vaš gumb ali povezava) in spustni meni znotraj .dropdownali drug element, ki deklarira position: relative;. Spustne menije je mogoče sprožiti iz <a>ali <button>elementov, da bolje ustrezajo vašim potencialnim potrebam.

En gumb

Vsak posamezen .btnelement lahko spremenite v spustni preklop z nekaj spremembami oznak. Tukaj je opisano, kako jih lahko vključite v delo z obema <button>elementoma:

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

In z <a>elementi:

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

Najboljši del je, da lahko to storite tudi s katero koli različico gumbov:

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

Gumb za razdelitev

Podobno ustvarite spustne menije z ločenimi gumbi s skoraj enakimi oznakami kot spustne menije z enim gumbom, vendar z dodatkom .dropdown-toggle-splitza pravilen razmik okoli spustne kazalke.

Ta dodatni razred uporabljamo za zmanjšanje vodoravnice paddingna obeh straneh kazalke za 25 % in odstranitev, margin-leftki je dodan za navadne spustne menije gumbov. Te dodatne spremembe ohranjajo kazalko na sredini gumba za razdelitev in zagotavljajo primernejšo velikost območja zadetka poleg glavnega 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

Spustni meniji gumbov delujejo z gumbi vseh velikosti, vključno s privzetimi in razdeljenimi spustnimi gumbi.

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

Navodila

Dropup

Sprožite spustne menije nad elementi z dodajanjem .dropupnadrejenemu 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

Sprožite spustne menije na desni strani elementov z dodajanjem .droprightnadrejenemu 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>

Dropleft

Sprožite spustne menije na levi strani elementov z dodajanjem .dropleftnadrejenemu 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>

V preteklosti so morale biti vsebine spustnega menija povezave, vendar to ne velja več za različico 4. Zdaj lahko po želji uporabite <button>elemente v svojih spustnih menijih namesto 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>

Ustvarite lahko tudi neinteraktivne spustne elemente z .dropdown-item-text. Oblikujte še naprej s CSS po meri ali besedilnimi pripomočki.

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

Aktiven

Dodajte .activeelementom v spustnem meniju, da jih oblikujete kot 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>

Onemogočeno

Dodajte .disabledelementom v spustnem meniju, da jih oblikujete kot onemogočene .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Privzeto je spustni meni samodejno postavljen 100 % od vrha in vzdolž leve strani nadrejenega. Dodajte .dropdown-menu-righta .dropdown-menuza poravnavo spustnega menija v desno.

Glavo pokonci! Spustni meniji so postavljeni zahvaljujoč Popper.js (razen če so v vrstici za krmarjenje).

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

Odzivna poravnava

Če želite uporabiti odzivno poravnavo, onemogočite dinamično pozicioniranje z dodajanjem data-display="static"atributa in uporabite odzivne variacijske razrede.

Če želite poravnati spustni meni z dano ali večjo prelomno točko, dodajte .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-haspopup="true" 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>

Če želite levi spustni meni poravnati z dano prelomno točko ali večjo, dodajte .dropdown-menu-rightin .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-haspopup="true" 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>

Upoštevajte, da vam ni treba dodati data-display="static"atributa spustnim gumbom v vrsticah za krmarjenje, saj se Popper.js ne uporablja v vrsticah za krmarjenje.

Glave

Dodajte glavo, da označite razdelke dejanj v katerem koli spustnem meniju.

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

Razdelilniki

Ločite skupine povezanih elementov menija z ločevalnikom.

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

Besedilo

Postavite poljubno prosto oblikovano besedilo v spustni meni z besedilom in uporabite pripomočke za razmik . Upoštevajte, da boste za omejitev širine menija verjetno potrebovali dodatne sloge velikosti.

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

Obrazci

Postavite obrazec v spustni meni ali ga naredite v spustnem meniju in uporabite pripomočke za rob ali oblazinjenje , da mu zagotovite negativni prostor, ki ga potrebujete.

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

Uporabite data-offsetali data-reference, da spremenite lokacijo spustnega menija.

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

Uporaba

Spustni vtičnik prek podatkovnih atributov ali JavaScripta preklopi skrito vsebino (spustne menije) tako, da preklopi .showrazred na nadrejenem elementu seznama. Atribut data-toggle="dropdown"se uporablja za zapiranje spustnih menijev na ravni aplikacije, zato je dobro, da ga vedno uporabljate.

V napravah, ki podpirajo dotik, odpiranje spustnega menija doda prazne ( $.noop) mouseoverupravljalnike neposrednim podrejenim <body>elementom. Ta nedvomno grdi vdor je potreben, da bi se izognili čudnemu delegiranju dogodkov v sistemu iOS , ki bi sicer preprečil, da bi dotik kjer koli zunaj spustnega menija sprožil kodo, ki zapre spustni meni. Ko je spustni meni zaprt, so ti dodatni prazni mouseoverobdelovalci odstranjeni.

Preko podatkovnih atributov

Dodajte data-toggle="dropdown"na povezavo ali gumb, da preklopite spustni meni.

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

Prek JavaScripta

Prikličite spustne menije prek JavaScripta:

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

`data-toggle="dropdown"`še potrebno

Ne glede na to, ali spustni meni pokličete prek JavaScripta ali namesto tega uporabite data-api, data-toggle="dropdown"mora biti vedno prisoten v sprožilnem elementu spustnega menija.

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset="".

Ime	Vrsta	Privzeto	Opis
odmik	številka \| niz \| funkcijo	0	Odmik spustnega menija glede na njegov cilj. Ko se funkcija uporablja za določanje odmika, se pokliče z objektom, ki vsebuje podatke o odmiku kot prvi argument. Funkcija mora vrniti objekt z enako strukturo. Vozlišče sprožilnega elementa DOM je posredovano kot drugi argument. Za več informacij si oglejte dokumente o odmiku Popper.js .
flip	logično	prav	Dovolite, da se spustni meni obrne v primeru prekrivanja referenčnega elementa. Za več informacij glejte flip dokumente Popper.js .
meja	niz \| element	'scrollParent'	Presežna meja omejitve spustnega menija. Sprejema vrednosti `'viewport'`, `'window'`, `'scrollParent'`ali sklic HTMLElement (samo JavaScript). Za več informacij glejte dokumentacijo PrevenOverflow za Popper.js .
referenca	niz \| element	'preklop'	Referenčni element spustnega menija. Sprejema vrednosti `'toggle'`, `'parent'`, ali sklic HTMLElement. Za več informacij si oglejte ReferenceObject dokumente Popper.js .
zaslon	vrvica	'dinamičen'	Privzeto uporabljamo Popper.js za dinamično pozicioniranje. Onemogočite to z `static`.

Upoštevajte , da je slog uporabljen za vsebnik , ko boundaryje nastavljen na katero koli vrednost, ki ni .'scrollParent'position: static.dropdown

Metode

Metoda	Opis
`$().dropdown('toggle')`	Preklopi spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`$().dropdown('show')`	Prikaže spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`$().dropdown('hide')`	Skrije spustni meni dane navigacijske vrstice ali navigacije z zavihki.
`$().dropdown('update')`	Posodobi položaj spustnega menija elementa.
`$().dropdown('dispose')`	Uniči spustni meni elementa.

Dogodki

Vsi spustni dogodki se sprožijo pri .dropdown-menunadrejenem elementu in imajo relatedTargetlastnost, katere vrednost je preklopni sidrni element. hide.bs.dropdownin hidden.bs.dropdowndogodki imajo clickEventlastnost (samo če je prvotni tip dogodka click), ki vsebuje objekt dogodka za dogodek klika.

Dogodek	Opis
`show.bs.dropdown`	Ta dogodek se sproži takoj, ko se pokliče metoda show instance.
`shown.bs.dropdown`	Ta dogodek se sproži, ko je spustni meni viden uporabniku (čakal bo na prehode CSS, da se dokončajo).
`hide.bs.dropdown`	Ta dogodek se sproži takoj, ko je bila poklicana metoda hide instance.
`hidden.bs.dropdown`	Ta dogodek se sproži, ko spustni meni ni več skrit pred uporabnikom (čakal bo na dokončanje prehodov CSS).

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

Spustni meniji

Pregled

Dostopnost

Primeri

En gumb

Gumb za razdelitev

Dimenzioniranje

Navodila

Dropup

Dropright

Dropleft

Elementi menija

Aktiven

Onemogočeno

Poravnava menija

Odzivna poravnava

Vsebina menija

Glave

Razdelilniki

Besedilo

Obrazci

Uporaba

Preko podatkovnih atributov

Prek JavaScripta

`data-toggle="dropdown"`še potrebno

Opcije

Metode

Dogodki

Spustni meniji

Pregled

Dostopnost

Primeri

En gumb

Gumb za razdelitev

Dimenzioniranje

Navodila

Dropup

Dropright

Dropleft

Elementi menija

Aktiven

Onemogočeno

Poravnava menija

Odzivna poravnava

Vsebina menija

Glave

Spustna glava

Razdelilniki

Besedilo

Obrazci

Spustne možnosti

Uporaba

Preko podatkovnih atributov

Prek JavaScripta

data-toggle="dropdown"še potrebno

Opcije

Metode

Dogodki

`data-toggle="dropdown"`še potrebno