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 , 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. Popper 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 într-o varietate 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.

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" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
</div>

Și cu <a>elemente:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

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

Buton de împărțire

În mod similar, creați meniuri derulante cu butoane împărțite cu aproape 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-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-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-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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Directii

Dropup

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-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-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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-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-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

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-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">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" 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" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <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>

De asemenea, puteți crea elemente derulante non-interactive cu .dropdown-item-text. Simțiți-vă liber să stilați mai mult cu CSS personalizate sau utilitare text.

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

Activ

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>

Dezactivat

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">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</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ă lui Popper (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-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>

Aliniere receptivă

Dacă doriți să utilizați alinierea receptivă, dezactivați poziționarea dinamică adăugând data-display="static"atributul și utilizați clasele de variație receptivă.

Pentru a alinia dreapta meniului drop-down cu punctul de întrerupere dat sau mai mare, adăugați .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-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>

Pentru a alinia meniul derulant din stânga.dropdown-menu-right cu punctul de întrerupere dat sau mai mare, adăugați și .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-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>

Rețineți că nu trebuie să adăugați un data-display="static"atribut la butoanele drop-down din barele de navigare, deoarece Popper nu este folosit în barele de navigare.

Anteturi

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>

Divizoare

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>

Text

Plasați orice text cu formă liberă într-un meniu derulant cu text și utilizați utilitare de spațiere . Rețineți că probabil veți avea nevoie de stiluri de dimensionare suplimentare pentru a limita lățimea meniului.

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

Forme

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

Folosiți data-offsetsau data-referencepentru a schimba locația meniului derulant.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </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>
  </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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <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>
</div>

Utilizare

Prin intermediul atributelor de date sau JavaScript, pluginul drop-down comută conținutul ascuns (meniurile drop-down) prin comutarea .showclasei la părinte .dropdown-menu. 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 type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu">
    ...
  </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. Când o funcție este folosită pentru a determina offset-ul, este apelată cu un obiect care conține datele offset ca prim argument. Funcția trebuie să returneze un obiect cu aceeași structură. Elementul de declanșare nodul DOM este transmis ca al doilea argument. Pentru mai multe informații, consultați documentele despre offset ale lui Popper .
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 ale lui Popper .
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 Popper preventOverflow .
referinţă	șir \| element	'comutare'	Element de referință al meniului drop-down. Acceptă valorile `'toggle'`, `'parent'`sau o referință HTMLElement. Pentru mai multe informații, consultați documentele de referință ale lui Popper .
afişa	şir	'dinamic'	În mod implicit, folosim Popper pentru poziționarea dinamică. Dezactivați acest lucru cu `static`.
popperConfig	nul \| obiect	nul	Pentru a schimba configurația implicită Popper a Bootstrap, consultați configurația lui Popper

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('show')`	Afișează meniul drop-down al unei anumite bare de navigare sau al navigării cu file.
`$().dropdown('hide')`	Ascunde meniul drop-down al unei anumite bare de navigare sau navigare 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. hide.bs.dropdowniar hidden.bs.dropdownevenimentele au o clickEventproprietate (doar atunci când tipul de eveniment original este click) care conține un obiect eveniment pentru evenimentul clic.

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

Un singur buton

Buton de împărțire

Dimensiunea

Directii

Dropup

Dropright

Dropleft

Elemente de meniu

Activ

Dezactivat

Alinierea meniului

Aliniere receptivă

Conținutul meniului

Anteturi

Divizoare

Text

Forme

Utilizare

Prin atribute de date

Prin JavaScript

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

Opțiuni

Metode

Evenimente

Mențiuni derulante

Prezentare generală

Accesibilitate

Exemple

Un singur buton

Buton de împărțire

Dimensiunea

Directii

Dropup

Dropright

Dropleft

Elemente de meniu

Activ

Dezactivat

Alinierea meniului

Aliniere receptivă

Conținutul meniului

Anteturi

Antet derulant

Divizoare

Text

Forme

Opțiuni drop-down

Utilizare

Prin atribute de date

Prin JavaScript

data-toggle="dropdown"încă necesar

Opțiuni

Metode

Evenimente

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