Dropdowns

Ndrysho mbivendosjet kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë me shtojcën me lëshim Bootstrap.

Vështrim i përgjithshëm

Dropdowns janë mbivendosje të ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve dhe më shumë. Ato janë bërë ndërvepruese me shtojcën e përfshirë JavaScript me zbritje Bootstrap. Ato ndërrohen duke klikuar, jo duke qëndruar pezull; ky është një vendim i qëllimshëm i projektimit.

Dropdowns janë ndërtuar në një bibliotekë të palës së tretë, Popper.js , e cila ofron pozicionim dinamik dhe zbulim të pamjes. Sigurohuni që të përfshini popper.min.js përpara JavaScript-it të Bootstrap ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper.js. Popper.js nuk përdoret për të pozicionuar skedarët me zbritje në shiritat e navigimit, megjithëse nuk kërkohet pozicionimi dinamik.

Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js .

Aksesueshmëria

Standardi WAI ARIA role="menu" përcakton një miniaplikacion aktual , por kjo është specifike për menytë e ngjashme me aplikacionet që aktivizojnë veprime ose funksione. Menytë ARIA mund të përmbajnë vetëm artikujt e menysë, artikujt e menysë së kutisë së kontrollit, artikujt e menysë së butonave të radios, grupet e butonave të radios dhe nën-menytë.

Nga ana tjetër, pikat e lëshimit të Bootstrap janë krijuar për të qenë të përgjithshme dhe të zbatueshme për një sërë situatash dhe strukturash shënjimi. Për shembull, është e mundur të krijohen skedarë që përmbajnë hyrje shtesë dhe kontrolle të formularit, të tilla si fushat e kërkimit ose formularët e hyrjes. Për këtë arsye, Bootstrap nuk pret (as nuk shton automatikisht) asnjë nga atributet roledhe atributet e kërkuara për menutë aria-e vërteta ARIA . Autorët do të duhet të përfshijnë vetë këto atribute më specifike.

Sidoqoftë, Bootstrap shton mbështetje të integruar për shumicën e ndërveprimeve standarde të menysë së tastierës, të tilla si aftësia për të lëvizur nëpër .dropdown-itemelementë individualë duke përdorur çelësat e kursorit dhe për të mbyllur menunë me ESCtastin.

Shembuj

Mbështilleni çelësin e menysë rënëse (butonin ose lidhjen tuaj) dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Dropdowns mund të shkaktohen nga <a>ose <button>elemente për t'iu përshtatur më mirë nevojave tuaja të mundshme.

Buton i vetëm

Çdo këngë .btnmund të shndërrohet në një ndërrim me rënie me disa ndryshime shënimi. Ja se si mund t'i vendosni ato në punë me secilin <button>element:

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

Dhe me <a>elemente:

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

Pjesa më e mirë është që ju mund ta bëni këtë me çdo variant të butonit, gjithashtu:

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

Butoni i ndarjes

Në mënyrë të ngjashme, krijoni zbritje të butonave të ndarjes me pothuajse të njëjtin shënim si ato me një buton të vetëm, por me shtimin e .dropdown-toggle-splitpër ndarjen e duhur rreth skeletit rënës.

Ne e përdorim këtë klasë shtesë për të reduktuar horizontalin paddingnë të dyja anët e kartës me 25% dhe për të hequr atë margin-leftqë shtohet për zbritjet e butonave të rregullt. Këto ndryshime shtesë e mbajnë kutinë të përqendruar në butonin e ndarjes dhe sigurojnë një zonë goditjeje me madhësi më të përshtatshme pranë butonit kryesor.

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

Përmasat

Lëshimet e butonave funksionojnë me butona të të gjitha madhësive, duke përfshirë butonat e paracaktuar dhe të ndarë.

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

Drejtimet

Dropup

Aktivizoni menytë rënëse sipër elementeve duke shtuar .dropupte elementi prind.

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

Aktivizoni menytë rënëse në të djathtë të elementeve duke shtuar .droprightte elementi prind.

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

Aktivizoni menytë rënëse në të majtë të elementeve duke shtuar .dropleftte elementi prind.

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

Historikisht, përmbajtja e menusë rënëse duhet të ishte lidhje, por kjo nuk është më rasti me v4. Tani mund të përdorni opsionalisht <button>elementë në listën tuaj rënëse në vend të vetëm <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>

Ju gjithashtu mund të krijoni artikuj jo-interaktivë me zbritje me .dropdown-item-text. Mos ngurroni të stiloni më tej me CSS të personalizuara ose shërbime teksti.

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

Aktiv

Shtojini .activeartikujve në listën rënëse për t'i stiluar si aktivë .

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

I paaftë

Shtojini .disabledartikujve në listën rënëse për t'i stiluar si të paaftë .

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

Si parazgjedhje, një meny rënëse pozicionohet automatikisht 100% nga lart dhe përgjatë anës së majtë të prindit të saj. Shtoni .dropdown-menu-rightnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse.

Kokat lart! Dropdown pozicionohen falë Popper.js (përveç rasteve kur ato gjenden në një shirit navigimi).

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

Titujt

Shtoni një kokë për të etiketuar seksionet e veprimeve në çdo meny rënëse.

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

Ndarësit

Ndani grupet e artikujve të lidhur të menysë me një ndarës.

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

Teksti

Vendosni çdo tekst në formë të lirë brenda një menuje rënëse me tekst dhe përdorni shërbimet e ndarjes . Vini re se ka të ngjarë të keni nevojë për stile shtesë të madhësisë për të kufizuar gjerësinë e menusë.

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

Format

Vendosni një formular brenda një menyje rënëse, ose shndërrojeni atë në një meny rënëse dhe përdorni shërbimet e margjinës ose mbushjes për t'i dhënë asaj hapësirën negative që ju nevojitet.

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

Përdorni data-offsetose data-referencepër të ndryshuar vendndodhjen e listës rënëse.

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

Përdorimi

Nëpërmjet atributeve të të dhënave ose JavaScript-it, shtojca me drop-down ndryshon përmbajtjen e fshehur (menytë me zbritje) duke ndërruar .showklasën në artikullin prind të listës. Atributi data-toggle="dropdown"mbështetet për mbylljen e menyve rënëse në një nivel aplikacioni, kështu që është një ide e mirë ta përdorni gjithmonë atë.

Në pajisjet e aktivizuara me prekje, hapja e një menyje rënëse shton mbajtës të zbrazët ( $.noop) mouseoverfëmijëve të menjëhershëm të <body>elementit. Ky hak pa dyshim i shëmtuar është i nevojshëm për të zgjidhur një problem të çuditshëm në delegimin e ngjarjeve të iOS , i cili përndryshe do të parandalonte një trokitje kudo jashtë listës së lëshimit nga aktivizimi i kodit që mbyll listën me lëshim. Pasi të mbyllet menyja rënëse, këta mouseovermbajtës shtesë bosh hiqen.

Nëpërmjet atributeve të të dhënave

Shto data-toggle="dropdown"në një lidhje ose buton për të ndërruar një listë rënëse.

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

Përmes JavaScript

Thirrni skedarët e lëshimit përmes JavaScript:

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

`data-toggle="dropdown"`ende kërkohet

Pavarësisht nëse e thërrisni listën tuaj të lëshimit përmes JavaScript ose në vend të kësaj përdorni data-api, data-toggle="dropdown"kërkohet që të jetë gjithmonë i pranishëm në elementin e aktivizimit të listës rënëse.

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Emri	Lloji	E paracaktuar	Përshkrim
kompensuar	numri \| varg \| funksionin	0	Kompensimi i zbritjes në lidhje me objektivin e tij. Për më shumë informacion referojuni dokumenteve offset të Popper.js .
rrokullisje	logjike	e vërtetë	Lejo që Dropdown të rrokulliset në rast të një mbivendosjeje në elementin e referencës. Për më shumë informacion referojuni dokumenteve rrotulluese të Popper.js .
kufiri	varg \| element	'scrollParent'	Kufiri i kufizimit të tejmbushjes së menysë rënëse. Pranon vlerat e `'viewport'`, `'window'`, `'scrollParent'`, ose një referencë HTMLElement (vetëm JavaScript). Për më shumë informacion, referojuni dokumenteve të preventOverflow të Popper.js .
referencë	varg \| element	'ndërroj'	Elementi i referencës së menysë rënëse. Pranon vlerat e `'toggle'`, `'parent'`, ose një referencë HTMLElement. Për më shumë informacion referojuni referencës së Popper.js Object docs .
shfaqja	varg	'dinamik'	Si parazgjedhje, ne përdorim Popper.js për pozicionimin dinamik. Çaktivizoni këtë me `static`.

Vini re kur boundaryvendoset në ndonjë vlerë tjetër përveç 'scrollParent', stili position: staticzbatohet në .dropdownkontejner.

Metodat

Metoda	Përshkrim
`$().dropdown('toggle')`	Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda.
`$().dropdown('update')`	Përditëson pozicionin e menysë rënëse të një elementi.
`$().dropdown('dispose')`	Shkatërron listën e një elementi.

Ngjarjet

Të gjitha ngjarjet me rënie aktivizohen në .dropdown-menuelementin mëmë dhe kanë një relatedTargetveti, vlera e së cilës është elementi i ankorimit ndërrues. hide.bs.dropdowndhe hidden.bs.dropdownngjarjet kanë një clickEventveti (vetëm kur lloji origjinal i ngjarjes është click) që përmban një Objekt Ngjarje për ngjarjen e klikimit.

Ngjarja	Përshkrim
`show.bs.dropdown`	Kjo ngjarje ndizet menjëherë kur thirret metoda e shembullit të shfaqjes.
`shown.bs.dropdown`	Kjo ngjarje aktivizohet kur menyja rënëse është bërë e dukshme për përdoruesin (do të presë që kalimet CSS të përfundojnë).
`hide.bs.dropdown`	Kjo ngjarje aktivizohet menjëherë kur është thirrur metoda e shembullit të fshehjes.
`hidden.bs.dropdown`	Kjo ngjarje aktivizohet kur fshirja e listës me zbritje ka përfunduar nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë).

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

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Buton i vetëm

Butoni i ndarjes

Përmasat

Drejtimet

Dropup

Dropright

Dropleft

Artikujt e menysë

Aktiv

I paaftë

Shtrirja e menysë

Përmbajtja e menysë

Titujt

Ndarësit

Teksti

Format

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

`data-toggle="dropdown"`ende kërkohet

Opsione

Metodat

Ngjarjet

Dropdowns

Vështrim i përgjithshëm

Aksesueshmëria

Shembuj

Buton i vetëm

Butoni i ndarjes

Përmasat

Drejtimet

Dropup

Dropright

Dropleft

Artikujt e menysë

Aktiv

I paaftë

Shtrirja e menysë

Përmbajtja e menysë

Titujt

Kreu me zbritje

Ndarësit

Teksti

Format

Opsionet e zbritjes

Përdorimi

Nëpërmjet atributeve të të dhënave

Përmes JavaScript

data-toggle="dropdown"ende kërkohet

Opsione

Metodat

Ngjarjet

`data-toggle="dropdown"`ende kërkohet