Mențiuni derulante

Comutați suprapunerile contextuale pentru afișarea listelor de linkuri și multe altele cu pluginul derulant Bootstrap.

Prezentare generală

Mențiunile derulante sunt suprapuneri contextuale care se pot comuta pentru afișarea listelor de linkuri și multe altele. Sunt făcute interactive cu pluginul JavaScript inclus Bootstrap. Acestea sunt comutate făcând clic, nu prin trecerea cursorului; aceasta este o decizie de proiectare intenționată.

Mențiunile derulante sunt construite pe o bibliotecă terță parte, Popper.js , care oferă poziționare dinamică și detectarea ferestrelor de vizualizare. Asigurați-vă că includeți popper.min.js înainte de JavaScript-ul Bootstrap sau utilizați bootstrap.bundle.min.js/ bootstrap.bundle.jscare conține Popper.js. Popper.js nu este folosit pentru a poziționa meniurile derulante în barele de navigare, deși nu este necesară poziționarea dinamică.

Dacă construiți JavaScript din sursă, este nevoieutil.js de .

Accesibilitate

Standardul WAI ARIA role="menu" definește un widget real , dar acesta este specific meniurilor de tip aplicație care declanșează acțiuni sau funcții. Meniurile ARIA pot conține numai elemente de meniu, elemente de meniu casete de selectare, elemente de meniu cu butoane radio, grupuri de butoane radio și submeniuri.

Mențiunile derulante ale Bootstrap, pe de altă parte, sunt concepute pentru a fi generice și aplicabile unei varietăți de situații și structuri de marcare. De exemplu, este posibil să creați meniuri derulante care conțin intrări suplimentare și controale de formular, cum ar fi câmpuri de căutare sau formulare de conectare. Din acest motiv, Bootstrap nu așteaptă (și nici nu adaugă automat) niciunul dintre atributele roleși aria-necesare pentru meniurile ARIA adevărate. Autorii vor trebui să includă ei înșiși aceste atribute mai specifice.

Cu toate acestea, Bootstrap adaugă suport încorporat pentru majoritatea interacțiunilor standard cu meniul tastaturii, cum ar fi capacitatea de a vă deplasa prin .dropdown-itemelemente individuale folosind tastele cursorului și de a închide meniul cu ESCtasta.

Exemple

Închideți comutatorul drop-down (butonul sau linkul dvs.) și meniul drop-down în .dropdown, sau alt element care declară position: relative;. Dropdown-urile pot fi declanșate de la <a>sau <button>elemente care să se potrivească mai bine nevoilor dumneavoastră potențiale.

Meniuri derulante cu un singur buton

Orice single .btnpoate fi transformat într-un meniu derulant cu unele modificări de markup. Iată cum le puteți pune în funcțiune cu oricare dintre <button>elemente:

<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 cu <a>elemente:

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

Cea mai bună parte este că puteți face acest lucru și cu orice variantă de buton:

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

Butoane derulante împărțite

În mod similar, creați meniuri derulante cu butoane împărțite cu practic același marcaj ca și meniurile derulante cu un singur buton, dar cu adăugarea de .dropdown-toggle-splitpentru o spațiere adecvată în jurul indicatorului derulant.

Folosim această clasă suplimentară pentru a reduce orizontalul de paddingpe fiecare parte a indicatorului cu 25% și pentru a elimina cele margin-leftadăugate pentru butoanele derulante obișnuite. Aceste modificări suplimentare mențin marcajul centrat în butonul despărțit și oferă o zonă de lovire de dimensiuni mai adecvate lângă butonul principal.

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

Dimensiunea

Butoanele derulante funcționează cu butoane de toate dimensiunile, inclusiv butoanele implicite și divizate.

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

Variație drop-up

Declanșați meniuri drop-down deasupra elementelor adăugând .dropupla elementul părinte.

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

Variație drop-right

Declanșați meniurile drop-down din dreapta elementelor adăugând .droprightla elementul părinte.

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

Variație dropleft

Declanșați meniurile drop-down din stânga elementelor adăugând .dropleftla elementul părinte.

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

Din punct de vedere istoric, conținutul meniului drop -down trebuia să fie linkuri, dar nu mai este cazul cu v4. Acum puteți utiliza opțional <button>elemente din meniurile dvs. derulante în loc de doar <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>

În mod implicit, un meniu derulant este poziționat automat 100% din partea de sus și de-a lungul părții stângi a părintelui său. Adăugați .dropdown-menu-rightla .dropdown-menua aliniați la dreapta meniul drop-down.

Atenție! Mențiunile derulante sunt poziționate datorită Popper.js (cu excepția cazului în care sunt conținute într-o bară de navigare).

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

Adăugați un antet pentru a eticheta secțiunile de acțiuni din orice meniu vertical.

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

Separați grupurile de elemente de meniu asociate cu un divizor.

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

Puneți un formular într-un meniu derulant sau transformați-l într-un meniu derulant și utilizați utilități de marjă sau de umplutură pentru a-i oferi spațiul negativ de care aveți nevoie.

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

Adăugați .activeelementele din meniul drop-down pentru a le stila ca active .

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

Adăugați .disabledelementele din meniul derulant pentru a le stila ca fiind dezactivate .

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

Utilizare

Prin atribute de date sau JavaScript, pluginul drop-down comută conținut ascuns (meniuri drop-down) prin comutarea .showclasei pe elementul din lista părinte. Atributul data-toggle="dropdown"se bazează pe închiderea meniurilor drop-down la nivel de aplicație, așa că este o idee bună să îl utilizați întotdeauna.

Pe dispozitivele cu atingere, deschiderea unui meniu drop-down adaugă handlere goale ( $.noop) mouseoverla copiii imediati ai <body>elementului. Acest hack desigur urat este necesar pentru a rezolva o ciudatenie în delegarea evenimentului iOS , care altfel ar împiedica o atingere oriunde în afara meniului derulant să declanșeze codul care închide meniul derulant. Odată ce meniul derulant este închis, acești handlere suplimentare goale mouseoversunt eliminate.

Prin atribute de date

Adăugați data-toggle="dropdown"la un link sau la un buton pentru a comuta un meniu drop-down.

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

Prin JavaScript

Apelați meniurile derulante prin JavaScript:

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

`data-toggle="dropdown"`încă necesar

Indiferent dacă apelați meniul drop-down prin JavaScript sau utilizați în schimb data-api, data-toggle="dropdown"este întotdeauna necesar să fie prezent pe elementul de declanșare al meniului drop-down.

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset="".

Nume	Tip	Mod implicit	Descriere
decalaj	număr \| șir \| funcţie	0	Deplasarea meniului derulant în raport cu ținta sa. Pentru mai multe informații, consultați documentele offset ale Popper.js .
flip	boolean	Adevărat	Permiteți ca Dropdown să se răstoarne în cazul unei suprapuneri pe elementul de referință. Pentru mai multe informații, consultați documentele flip de la Popper.js .
limite	șir \| element	'scrollParent'	Limita constrângerii de depășire a meniului drop-down. Acceptă valorile `'viewport'`, `'window'`, `'scrollParent'`, sau o referință HTMLElement (numai JavaScript). Pentru mai multe informații, consultați documentele preventOverflow ale Popper.js .

Rețineți că atunci când boundaryeste setat la orice altă valoare decât 'scrollParent', stilul position: staticeste aplicat .dropdowncontainerului.

Metode

Metodă	Descriere
`$().dropdown('toggle')`	Comută meniul derulant al unei anumite bare de navigare sau al navigării cu file.
`$().dropdown('update')`	Actualizează poziția meniului derulant al unui element.
`$().dropdown('dispose')`	Distruge meniul drop-down al unui element.

Evenimente

Toate evenimentele drop-down sunt declanșate la .dropdown-menuelementul părinte și au o relatedTargetproprietate, a cărei valoare este elementul de ancorare de comutare.

Eveniment	Descriere
`show.bs.dropdown`	Acest eveniment se declanșează imediat când este apelată metoda show instance.
`shown.bs.dropdown`	Acest eveniment este declanșat atunci când meniul derulant a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
`hide.bs.dropdown`	Acest eveniment este declanșat imediat când a fost apelată metoda de ascundere a instanței.
`hidden.bs.dropdown`	Acest eveniment este declanșat când meniul derulant s-a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).

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

Mențiuni derulante

Prezentare generală

Accesibilitate

Exemple

Meniuri derulante cu un singur buton

Butoane derulante împărțite

Dimensiunea

Variație drop-up

Variație drop-right

Variație dropleft

Elemente de meniu

Alinierea meniului

Antetele meniului

Separatoare de meniu

Formulare de meniu

Elemente de meniu active

Elemente de meniu dezactivate

Utilizare

Prin atribute de date

Prin JavaScript

`data-toggle="dropdown"`încă necesar

Opțiuni

Metode

Evenimente

Mențiuni derulante

Prezentare generală

Accesibilitate

Exemple

Meniuri derulante cu un singur buton

Butoane derulante împărțite

Dimensiunea

Variație drop-up

Variație drop-right

Variație dropleft

Elemente de meniu

Alinierea meniului

Antetele meniului

Antet derulant

Separatoare de meniu

Formulare de meniu

Elemente de meniu active

Elemente de meniu dezactivate

Utilizare

Prin atribute de date

Prin JavaScript

data-toggle="dropdown"încă necesar

Opțiuni

Metode

Evenimente

`data-toggle="dropdown"`încă necesar