Dropdowns

Aqleb is-superpożizzjonijiet kuntestwali għall-wiri ta' listi ta' links u aktar bil-plugin dropdown Bootstrap.

Fuq din il-paġna

Ħarsa ġenerali

Dropdowns huma toggleable, overlays kuntestwali għall-wiri ta 'listi ta' links u aktar. Huma jsiru interattivi mal-plugin Bootstrap dropdown JavaScript inkluż. Huma qed toggled billi tikklikkja, mhux billi tittajjar; din hija deċiżjoni ta' disinn intenzjonali .

Dropdowns huma mibnija fuq librerija ta 'parti terza, Popper , li tipprovdi pożizzjonament dinamiku u skoperta viewport. Kun żgur li tinkludi popper.min.js qabel il-JavaScript ta' Bootstrap jew uża bootstrap.bundle.min.js/ bootstrap.bundle.jsli fih Popper. Popper ma jintużax biex ipoġġi dropdowns fin-navbars għalkemm peress li l-ippożizzjonar dinamiku mhuwiex meħtieġ.

Aċċessibilità

L -istandard WAI ARIA jiddefinixxi role="menu"widget attwali , iżda dan huwa speċifiku għal menus simili għal applikazzjoni li jqanqlu azzjonijiet jew funzjonijiet. Il-menus ARIA jista' jkun fihom biss oġġetti tal-menu, oġġetti tal-menu tal-kaxxa ta' kontroll, oġġetti tal-menu tal-buttuni tar-radju, gruppi tal-buttuni tar-radju u sub-menus.

Il-dropdowns ta' Bootstrap, min-naħa l-oħra, huma mfassla biex ikunu ġeneriċi u applikabbli għal varjetà ta' sitwazzjonijiet u strutturi ta' markup. Pereżempju, huwa possibbli li jinħolqu dropdowns li fihom inputs addizzjonali u kontrolli tal-formoli, bħal oqsma ta 'tfittxija jew formoli ta' login. Għal din ir-raġuni, Bootstrap ma jistenna (u lanqas iżid awtomatikament) xi wieħed mill- roleu aria-attributi meħtieġa għal menus ARIA veri. L-awturi se jkollhom jinkludu dawn l-attributi aktar speċifiċi huma stess.

Madankollu, Bootstrap iżid appoġġ integrat għall-biċċa l-kbira tal-interazzjonijiet standard tal-menu tat-tastiera, bħall-abbiltà li timxi minn .dropdown-itemelementi individwali billi tuża ċ-ċwievet tal-cursor u tagħlaq il-menu biċ- ESCċavetta.

Eżempji

Kebbeb it-toggle tal-dropdown (il-buttuna jew il-link tiegħek) u l-menu dropdown fi ħdan .dropdown, jew element ieħor li jiddikjara position: relative;. Dropdowns jistgħu jiġu attivati minn <a>jew <button>elementi li jaqblu aħjar mal-bżonnijiet potenzjali tiegħek. L-eżempji murija hawn jużaw <ul>elementi semantiċi fejn xieraq, iżda l-markup personalizzat huwa appoġġjat.

Buttuna waħda

Kwalunkwe wieħed .btnjista' jinbidel f'toggle dropdown b'xi bidliet fil-markup. Hawn kif tista 'tpoġġihom jaħdmu ma' kwalunkwe <button>elementi:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

U <a>b'elementi:

html

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

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

L-aħjar parti hija li tista 'tagħmel dan ma' kwalunkwe varjant tal-buttuna, ukoll:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Buttuna maqsuma

Bl-istess mod, oħloq dropdowns tal-buttuna maqsuma prattikament bl-istess markup bħal dropdowns ta 'buttuna waħda, iżda biż-żieda ta' .dropdown-toggle-splitgħal spazjar xieraq madwar il-caret dropdown.

Aħna nużaw din il-klassi żejda biex innaqqsu l-orizzontali paddingfuq kull naħa tal-caret b'25% u neħħi margin-leftdak miżjud għal dropdowns tal-buttuni regolari. Dawk il-bidliet żejda jżommu l-caret iċċentrat fil-buttuna maqsuma u jipprovdu żona ta 'hit ta' daqs aktar xieraq ħdejn il-buttuna prinċipali.

<!-- 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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Daqs

Buttuni dropdowns jaħdmu ma 'buttuni ta' kull daqs, inklużi default u buttuni dropdown maqsuma.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropdowns skuri

Agħżel dropdowns aktar skuri biex taqbel ma' navbar skur jew stil tad-dwana billi żżid .dropdown-menu-darkma 'eżistenti .dropdown-menu. L-ebda tibdil mhu meħtieġ għall-oġġetti dropdown.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

U billi tużaha f'navbar:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Direzzjonijiet

RTL

Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'RTL, jiġifieri .dropstartse tidher fuq in-naħa tal-lemin.

Iċċentrat

Agħmel il-menu dropdown iċċentrat taħt il-toggle ma ' .dropdown-centerfuq l-element ġenitur.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Trigger menus dropdown hawn fuq elementi billi żżid .dropupmal-element ġenitur.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</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-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropup iċċentrat

Agħmel il-menu dropup iċċentrat fuq il-toggle ma ' .dropup-centerfuq l-element ġenitur.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Trigger menus dropdown fuq il-lemin tal-elementi billi żżid .dropendmal-element ġenitur.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

Trigger menus dropdown fuq ix-xellug tal-elementi billi żżid .dropstartmal-element ġenitur.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Tista 'tuża <a>jew <button>elementi bħala oġġetti dropdown.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Tista' wkoll toħloq oġġetti dropdown mhux interattivi b' .dropdown-item-text. Ħossok liberu li tfassal aktar b'utilitajiet CSS jew test tad-dwana.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Attiva

Żid .activemal-oġġetti fil-dropdown biex tfassalhom bħala attivi . Biex twassal l-istat attiv għal teknoloġiji ta 'assistenza, uża l- aria-currentattribut — billi tuża l- pagevalur għall-paġna kurrenti, jew truegħall-oġġett kurrenti f'sett.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

B'diżabilità

Żid .disabledmal-oġġetti fil-dropdown biex tfassalhom bħala diżabbli .

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

B'mod awtomatiku, menu dropdown jitqiegħed awtomatikament 100% minn fuq u tul in-naħa tax-xellug tal-ġenitur tiegħu. Tista 'tbiddel dan bil- .drop*klassijiet direzzjonali, iżda tista' wkoll tikkontrollahom bi klassijiet ta 'modifikatur addizzjonali.

Żid .dropdown-menu-endmal- .dropdown-menulemin tallinja l-menu dropdown. Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'RTL, jiġifieri .dropdown-menu-endse tidher fuq in-naħa tax-xellug.

Irjus up! Dropdowns huma pożizzjonati grazzi għal Popper ħlief meta jkunu jinsabu f'navbar.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Allinjament reattiv

Jekk trid tuża allinjament li jirrispondu, iddiżattiva l-pożizzjonament dinamiku billi żżid l- data-bs-display="static"attribut u uża l-klassijiet tal-varjazzjoni li tirrispondi.

Biex tallinja dritt il-menu dropdown mal-punt ta' waqfien mogħti jew akbar, żid .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Biex tallinja xellug il-menu dropdown mal-punt ta 'waqfien mogħti jew akbar, żid .dropdown-menu-endu .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Innota li m'għandekx bżonn iżżid data-bs-display="static"attribut mal-buttuni dropdown fin-navbars, peress li Popper ma jintużax fin-navbars.

Għażliet ta' allinjament

Filwaqt li tieħu ħafna mill-għażliet murija hawn fuq, hawn demo żgħira tas-sink tal-kċina ta 'diversi għażliet ta' allinjament dropdown f'post wieħed.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Headers

Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Diviżuri

Gruppi separati ta 'oġġetti tal-menu relatati ma' divider.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Test

Poġġi kwalunkwe test ta' forma ħielsa f'menu dropdown bit-test u uża utilitajiet ta' spazjar . Innota li x'aktarx ikollok bżonn stili ta' daqs addizzjonali biex tillimita l-wisa' tal-menu.

html

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

Formoli

Poġġi formola f'menu dropdown, jew għamilha f'menu dropdown, u uża utilitajiet tal-marġni jew tal-ikkuttunar biex tagħtiha l-ispazju negattiv li teħtieġ.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <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>
</div>

Uża data-bs-offsetjew data-bs-referencebiex tibdel il-post tal-dropdown.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </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-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Imġieba mill-qrib awtomatika

B'mod awtomatiku, il-menu dropdown jingħalaq meta tikklikkja ġewwa jew barra l-menu dropdown. Tista 'tuża l- autoClosegħażla li tibdel din l-imġiba tal-dropdown.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Varjabbli

Miżjud fi v5.2.0

Bħala parti mill-approċċ tal-varjabbli tas-CSS li qed jevolvu ta' Bootstrap, id-dropdowns issa jużaw varjabbli tas-CSS lokali .dropdown-menugħal adattament imtejjeb f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

L-adattament permezz ta' varjabbli CSS jista' jidher fuq il- .dropdown-menu-darkklassi fejn nissuperaw valuri speċifiċi mingħajr ma nżidu seletturi CSS duplikati.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Sass varjabbli

Varjabbli għall-listennijiet kollha:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Varjabbli għall- downdown dlam :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Varjabbli għall-carets ibbażati fuq CSS li jindikaw l-interattività ta' dropdown:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Mixins

Mixins jintużaw biex jiġġeneraw il-carets bbażati fuq CSS u jistgħu jinstabu f' scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Użu

Permezz ta' attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .showklassi fuq il-ġenitur .dropdown-menu. L- data-bs-toggle="dropdown"attribut huwa bbażat fuqu għall-għeluq tal-menus dropdown f'livell ta 'applikazzjoni, għalhekk hija idea tajba li dejjem tużah.

Fuq apparati li jintmess, il-ftuħ ta' dropdown iżid mouseoverhandlers vojta mat-tfal immedjati tal- <body>element. Dan il-hack ċertament ikrah huwa meħtieġ biex jaħdem madwar quirk fid-delegazzjoni tal-avvenimenti tal-iOS , li inkella jipprevjeni vit kullimkien barra mill-dropdown milli jikkawża l-kodiċi li jagħlaq il-dropdown. Ladarba l-dropdown jingħalaq, dawn il-handlers vojta addizzjonali mouseoverjitneħħew.

Via attributi tad-data

Żid data-bs-toggle="dropdown"ma' link jew buttuna biex taqleb dropdown.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Via JavaScript

Ċempel il-dropdowns permezz ta' JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`għadu meħtieġ

Irrispettivament minn jekk inti sejħa dropdown tiegħek permezz JavaScript jew minflok tuża d-data-api, data-bs-toggle="dropdown"huwa dejjem meħtieġ li tkun preżenti fuq l-element grillu dropdown.

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Isem	Tip	Default	Deskrizzjoni
`autoClose`	boolean, spag	`true`	Ikkonfigura l-imġieba tal-għeluq awtomatiku tal-dropdown: `true`- il-dropdown se jingħalaq billi tikklikkja barra jew ġewwa l-menu dropdown. `false`- il-dropdown se jingħalaq billi tikklikkja l-buttuna toggle u manwalment sejħa `hide`jew `toggle`metodu. (Ukoll mhux se jingħalaq billi tagħfas iċ- `esc`ċavetta) `'inside'`- il-dropdown jingħalaq (biss) billi tikklikkja ġewwa l-menu dropdown. `'outside'`- il-dropdown se jingħalaq (biss) billi tikklikkja barra l-dropdown menu. Nota: il-dropdown jista 'dejjem jingħalaq biċ- `ESC`ċavetta.
`boundary`	spag, element	`'clippingParents'`	Il-konfini tar-restrizzjoni tal-overflow tal-menu dropdown (japplika biss għall-modifikatur preventOverflow ta' Popper). B'mod awtomatiku huwa `clippingParents`u jista 'jaċċetta referenza HTMLElement (permezz ta' JavaScript biss). Għal aktar informazzjoni irreferi għad- dokumenti detectOverflow ta’ Popper .
`display`	spag	`'dynamic'`	B'mod awtomatiku, nużaw Popper għal pożizzjonament dinamiku. Iddiżattiva dan b' `static`.
`offset`	firxa, string, funzjoni	`[0, 2]`	Tpaċija tal-dropdown relattiv għall-mira tagħha. Tista' tgħaddi string fl-attributi tad-dejta b'valuri separati bil-virgola bħal: `data-bs-offset="10,20"`. Meta tintuża funzjoni biex tiddetermina l-offset, tissejjaħ b'oġġett li jkun fih it-tqegħid tal-popper, ir-referenza u l-popper rects bħala l-ewwel argument tagħha. L-element triggering node DOM huwa mgħoddi bħala t-tieni argument. Il-funzjoni trid tirritorna firxa b'żewġ numri: skidding , distanza . Għal aktar informazzjoni irreferi għad-dokumenti tal- offset ta’ Popper .
`popperConfig`	null, oġġett, funzjoni	`null`	Biex tibdel il-konfigurazzjoni default Popper ta' Bootstrap, ara l-konfigurazzjoni ta' Popper . Meta tintuża funzjoni biex tinħoloq il-konfigurazzjoni Popper, din tissejjaħ b'oġġett li fih il-konfigurazzjoni Popper default tal-Bootstrap. Jgħinek tuża u tgħaqqad id-default mal-konfigurazzjoni tiegħek stess. Il-funzjoni trid tirritorna oġġett ta 'konfigurazzjoni għal Popper.
`reference`	spag, element, oġġett	`'toggle'`	Element ta' referenza tal-menu dropdown. Jaċċetta l-valuri ta' `'toggle'`, `'parent'`, referenza HTMLElement jew oġġett li jipprovdi `getBoundingClientRect`. Għal aktar informazzjoni irreferi għad-doks tal- kostruttur ta' Popper u d-doks tal -element virtwali .

Bl-użu tal-funzjoni ma`popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Metodi

Metodu	Deskrizzjoni
`dispose`	Jeqred id-dropdown ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)
`getInstance`	Metodu statiku li jippermettilek li tikseb l-istanza dropdown assoċjata ma 'element DOM, tista' tużah bħal dan: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metodu statiku li jirritorna istanza dropdown assoċjata ma 'element DOM jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata. Tista' tużah bħal dan: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Jaħbi l-menu dropdown ta' navbar partikolari jew navigazzjoni bit-tabbed.
`show`	Juri l-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.
`toggle`	Jaqbel mal-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed.
`update`	Taġġorna l-pożizzjoni ta' dropdown ta' element.

Avvenimenti

L-avvenimenti kollha dropdown huma sparati fuq l-element toggling u mbagħad bubbled up. Allura tista 'wkoll iżżid semmiegħa tal-avvenimenti fuq l .dropdown-menu-element ġenitur tal-'. hide.bs.dropdownu l- hidden.bs.dropdownavvenimenti għandhom clickEventproprjetà (biss meta t-tip oriġinali tal-Avveniment huwa click) li fih Oġġett tal-Avveniment għall-avveniment tal-ikklikkja.

Tip ta' avveniment	Deskrizzjoni
`hide.bs.dropdown`	Nirien immedjatament meta l- `hide`metodu tal-istanza jkun ġie msejjaħ.
`hidden.bs.dropdown`	Tispara meta l-dropdown ikun spiċċa moħbi mill-utent u t-tranżizzjonijiet CSS ikunu lestew.
`show.bs.dropdown`	Nirien immedjatament meta `show`jissejjaħ il-metodu tal-istanza.
`shown.bs.dropdown`	Tispara meta l-dropdown saret viżibbli għall-utent u t-tranżizzjonijiet CSS ikunu lestew.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

Dropdowns

Ħarsa ġenerali

Aċċessibilità

Eżempji

Buttuna waħda

Buttuna maqsuma

Daqs

Dropdowns skuri

Direzzjonijiet

RTL

Iċċentrat

Dropup

Dropup iċċentrat

Dropend

Dropstart

Oġġetti tal-menu

Attiva

B'diżabilità

Allinjament tal-menu

Allinjament reattiv

Għażliet ta' allinjament

Kontenut tal-menu

Headers

Diviżuri

Test

Formoli

Imġieba mill-qrib awtomatika

CSS

Varjabbli

Sass varjabbli

Mixins

Użu

Via attributi tad-data

Via JavaScript

`data-bs-toggle="dropdown"`għadu meħtieġ

Għażliet

Bl-użu tal-funzjoni ma`popperConfig`

Metodi

Avvenimenti

Dropdowns

Ħarsa ġenerali

Aċċessibilità

Eżempji

Buttuna waħda

Buttuna maqsuma

Daqs

Dropdowns skuri

Direzzjonijiet

RTL

Iċċentrat

Dropup

Dropup iċċentrat

Dropend

Dropstart

Oġġetti tal-menu

Attiva

B'diżabilità

Allinjament tal-menu

Allinjament reattiv

Għażliet ta' allinjament

Kontenut tal-menu

Headers

Dropdown header

Diviżuri

Test

Formoli

Għażliet dropdown

Imġieba mill-qrib awtomatika

CSS

Varjabbli

Sass varjabbli

Mixins

Użu

Via attributi tad-data

Via JavaScript

data-bs-toggle="dropdown"għadu meħtieġ

Għażliet

Bl-użu tal-funzjoni mapopperConfig

Metodi

Avvenimenti

`data-bs-toggle="dropdown"`għadu meħtieġ

Bl-użu tal-funzjoni ma`popperConfig`