Dropdowns

Ŝaltu kuntekstajn supermetaĵojn por montri listojn de ligiloj kaj pli kun la menu-aldonaĵo Bootstrap.

Superrigardo

Dropdowns estas ŝanĝeblaj, kuntekstaj supermetaĵoj por montri listojn de ligiloj kaj pli. Ili fariĝas interagaj per la inkluzivita Bootstrap-falumenuo JavaScript-kromaĵo. Ili estas ŝanĝitaj per klakado, ne per ŝvebado; ĉi tio estas intencita desegna decido.

Dropdowns estas konstruitaj sur triaparta biblioteko, Popper.js , kiu disponigas dinamikan poziciigon kaj vidfenestrodetekton. Nepre inkluzivu popper.min.js antaŭ la JavaScript de Bootstrap aŭ uzu bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper.js. Popper.js ne kutimas poziciigi falmenuojn en navbaroj tamen ĉar dinamika poziciigado ne estas postulata.

Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .

Alirebleco

La WAI ARIA normo difinas realan role="menu"fenestraĵon , sed ĉi tio estas specifa por aplikaĵ-similaj menuoj kiuj ekigas agojn aŭ funkciojn. ARIA- menuoj povas enhavi nur menueroj, markobutono menueroj, radiobutono menueroj, radiobutongrupoj kaj submenuoj.

La menuoj de Bootstrap, aliflanke, estas desegnitaj por esti ĝeneralaj kaj aplikeblaj al diversaj situacioj kaj markadaj strukturoj. Ekzemple, eblas krei falmenuojn kiuj enhavas pliajn enigojn kaj formularajn kontrolojn, kiel serĉkampojn aŭ ensalutformularojn. Tial, Bootstrap ne atendas (nek aŭtomate aldonas) iun ajn el la rolekaj aria-atributoj necesaj por veraj ARIA- menuoj. Aŭtoroj devos mem inkluzivi ĉi tiujn pli specifajn atributojn.

Tamen, Bootstrap aldonas enkonstruitan subtenon por la plej multaj normaj klavaraj menuinteragoj, kiel ekzemple la kapablo moviĝi tra individuaj .dropdown-itemelementoj uzante la kursorajn klavojn kaj fermi la menuon per la ESCklavo.

Ekzemploj

Envolvu la baskulon de la falmenuo (via butono aŭ ligilo) kaj la falmenuon ene de .dropdown, aŭ alia elemento kiu deklaras position: relative;. Dropdowns povas esti ekigitaj de <a>aŭ <button>elementoj por pli bone konveni viajn eblajn bezonojn.

Ununura butono

Ajna unuopaĵo .btnpovas esti igita falmenumo kun iuj markadaj ŝanĝoj. Jen kiel vi povas funkcii ilin per ambaŭ <button>elementoj:

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

Kaj kun <a>elementoj:

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

La plej bona parto estas, ke vi ankaŭ povas fari tion per iu ajn butonvariaĵo:

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

Dividi butonon

Simile, kreu dividitajn butonajn falmenuojn kun preskaŭ la sama markado kiel ununuraj butonfalmenuoj, sed kun la aldono de .dropdown-toggle-splitpor taŭga interspaco ĉirkaŭ la falmenumo.

Ni uzas ĉi tiun ekstran klason por redukti la horizontalon paddingĉe ambaŭ flankoj de la kamero je 25% kaj forigi la margin-leftaldonitan por regulaj butonfalumoj. Tiuj kromaj ŝanĝoj tenas la signon centrita en la dividita butono kaj provizas pli taŭge grandecon trafitan areon apud la ĉefa butono.

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

Dimensio

Butonaj falmenuoj funkcias kun butonoj de ĉiuj grandecoj, inkluzive de defaŭltaj kaj dividitaj falmenuoj.

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

Direktoj

Dropup

Ekfunkciigu falmenuojn super elementoj aldonante .dropupal la gepatra elemento.

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

Ekfunkciigu falmenuojn dekstre de la elementoj aldonante .droprightal la gepatra elemento.

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

Ekfunkciigu falmenuojn maldekstre de la elementoj aldonante .dropleftal la gepatra elemento.

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

Historie falmenuaj enhavoj devis esti ligiloj, sed tio ne plu okazas ĉe v4. Nun vi povas laŭvole uzi <button>elementojn en viaj falmenuoj anstataŭ nur <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>

Vi ankaŭ povas krei ne-interagajn menumenuojn per .dropdown-item-text. Bonvolu stiligi plu per kutimaj CSS aŭ tekstaj utilecoj.

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

Aktiva

Aldonu .activeal eroj en la menuo por stiligi ilin kiel aktivaj .

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

Malebligita

Aldonu .disabledal eroj en la menuo por stiligi ilin kiel malŝaltitaj .

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

Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Aldonu .dropdown-menu-rightal .dropdown-menudekstre vicigi la falmenuon.

Atentu! Dropdowns estas poziciigitaj danke al Popper.js (krom kiam ili estas enhavitaj en navbar).

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

Kapoj

Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.

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

Dividiloj

Apartigu grupojn de rilataj menueroj per disigilo.

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

Teksto

Metu ajnan liberforman tekston en falmenuon kun teksto kaj uzu interspacajn utilecojn . Notu, ke vi verŝajne bezonos pliajn grandecostilojn por limigi la menuan larĝecon.

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

Formoj

Metu formularon en falmenuon, aŭ transformu ĝin en falmenuon, kaj uzu marĝenajn aŭ kompletigajn ilojn por doni al ĝi la negativan spacon, kiun vi postulas.

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

Uzu data-offsetaŭ data-referencepor ŝanĝi la lokon de la menuo.

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

Uzado

Per datumaj atributoj aŭ JavaScript, la falmenuo aldonaĵo ŝanĝas kaŝitan enhavon (falmenuoj) ŝanĝante la .showklason sur la gepatra listo. La data-toggle="dropdown"atributo estas fidata por fermi falmenuojn ĉe aplika nivelo, do estas bona ideo ĉiam uzi ĝin.

Sur tuŝ-ebligitaj aparatoj, malfermi falmenuon aldonas malplenajn ( $.noop) mouseoverpritraktilojn al la tujaj infanoj de la <body>elemento. Ĉi tiu certe malbela hako estas necesa por labori ĉirkaŭ strangaĵo en la eventa delegacio de iOS , kiu alie malhelpus frapeton ie ajn ekster la falmenuo ekfunkciigi la kodon, kiu fermas la falmenuon. Post kiam la menuo estas fermita, ĉi tiuj aldonaj malplenaj mouseoverpritraktiloj estas forigitaj.

Per datumaj atributoj

Aldonu data-toggle="dropdown"al ligilo aŭ butono por ŝanĝi falmenuon.

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

Per JavaScript

Voku la menuojn per JavaScript:

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

`data-toggle="dropdown"`ankoraŭ bezonata

Sendepende de ĉu vi nomas vian falmenuon per JavaScript aŭ anstataŭe uzas la datuman api, data-toggle="dropdown"ĉiam necesas ĉeesti sur la ellasilelemento de la menuo.

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset="".

Nomo	Tajpu	Defaŭlte	Priskribo
ofseto	nombro \| ŝnuro \| funkcio	0	Ofseto de la falmenuo relative al ĝia celo. Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper.js .
renversi	bulea	vera	Permesu al Dropdown renversi en kazo de interkovro sur la referenca elemento. Por pliaj informoj raportu al la flip docs de Popper.js .
limo	ŝnuro \| elemento	'scrollParent'	Superflua limo limo de la falmenuo. Akceptas la valorojn de `'viewport'`, `'window'`, `'scrollParent'`, aŭ HTMLElement-referenco (nur JavaScript). Por pliaj informoj raportu al preventOverflow- dokumentoj de Popper.js .
referenco	ŝnuro \| elemento	'ŝalti'	Referenca elemento de la falmenuo. Akceptas la valorojn de `'toggle'`, `'parent'`, aŭ HTMLElement-referenco. Por pliaj informoj referu al la referencaj dokumentoj de Popper.js .
ekrano	ŝnuro	'dinamika'	Defaŭlte, ni uzas Popper.js por dinamika poziciigado. Malebligu ĉi tion per `static`.

Notu, kiam boundaryestas agordita al iu ajn valoro krom 'scrollParent', la stilo position: staticestas aplikata al la .dropdownujo.

Metodoj

Metodo	Priskribo
`$().dropdown('toggle')`	Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado.
`$().dropdown('update')`	Ĝisdatigas la pozicion de la menuo de elemento.
`$().dropdown('dispose')`	Detruas la falmenuon de elemento.

Eventoj

Ĉiuj falmenuaj eventoj estas pafitaj ĉe la .dropdown-menugepatra elemento de la ' kaj havas relatedTargetposedaĵon, kies valoro estas la ŝanĝanta ankrelemento. hide.bs.dropdownkaj hidden.bs.dropdowneventoj havas clickEventposedaĵon (nur kiam la origina eventospeco estas click) kiu enhavas Event Object por la klaka evento.

Evento	Priskribo
`show.bs.dropdown`	Ĉi tiu evento tuj ekfunkciigas kiam la metodo de spektaklo estas vokita.
`shown.bs.dropdown`	Ĉi tiu evento estas pafita kiam la falmenuo fariĝis videbla por la uzanto (atendos CSS-transirojn, por plenumi).
`hide.bs.dropdown`	Ĉi tiu evento estas lanĉita tuj kiam la metodo kaŝi kazon estas vokita.
`hidden.bs.dropdown`	Ĉi tiu evento estas pafita kiam la menuo finiĝis kaŝita de la uzanto (atendos CSS-transirojn, por finiĝi).

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

Dropdowns

Superrigardo

Alirebleco

Ekzemploj

Ununura butono

Dividi butonon

Dimensio

Direktoj

Dropup

Dropright

Dropleft

Menueroj

Aktiva

Malebligita

Menua vicigo

Enhavo de la menuo

Kapoj

Dividiloj

Teksto

Formoj

Uzado

Per datumaj atributoj

Per JavaScript

`data-toggle="dropdown"`ankoraŭ bezonata

Opcioj

Metodoj

Eventoj

Dropdowns

Superrigardo

Alirebleco

Ekzemploj

Ununura butono

Dividi butonon

Dimensio

Direktoj

Dropup

Dropright

Dropleft

Menueroj

Aktiva

Malebligita

Menua vicigo

Enhavo de la menuo

Kapoj

menuokapo

Dividiloj

Teksto

Formoj

Dropdown opcioj

Uzado

Per datumaj atributoj

Per JavaScript

data-toggle="dropdown"ankoraŭ bezonata

Opcioj

Metodoj

Eventoj

`data-toggle="dropdown"`ankoraŭ bezonata