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 , 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.js
që përmban Popper. Popper nuk përdoret për të pozicionuar pikat rënëse 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 ARIArole="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 role
dhe 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.
Megjithatë, 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-item
elementë 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ë .btn
mund 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" 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>
Dhe me <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>
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-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 pikat rënëse 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-split
për ndarjen e duhur rreth skeletit rënës.
Ne e përdorim këtë klasë shtesë për të reduktuar horizontalin padding
në të dyja anët e kartës me 25% dhe për të hequr atë margin-left
që 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-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-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>
Drejtimet
Dropup
Aktivizoni menytë rënëse sipër elementeve duke shtuar .dropup
te elementi prind.
<!-- 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
Aktivizoni menytë rënëse në të djathtë të elementeve duke shtuar .dropright
te elementi prind.
<!-- 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
Aktivizoni menytë rënëse në të majtë të elementeve duke shtuar .dropleft
te elementi prind.
<!-- 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>
Artikujt e menysë
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" 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>
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 .active
artikujve 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 .disabled
artikujve 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">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Shtrirja e menysë
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-right
në a .dropdown-menu
në të djathtë, rreshtoni menunë rënëse.
<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>
Rreshtimi i përgjegjshëm
Nëse dëshironi të përdorni shtrirjen e përgjegjshme, çaktivizoni pozicionimin dinamik duke shtuar data-display="static"
atributin dhe përdorni klasat e variacionit të përgjegjshëm.
Për të lidhur djathtas menynë rënëse me pikën e caktuar të ndërprerjes ose më të madhe, shtoni .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>
Për të lidhur menynë rënëse majtas.dropdown-menu-right
me pikën e caktuar të ndërprerjes ose më të madhe, shtoni dhe .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>
Vini re se nuk keni nevojë të shtoni një data-display="static"
atribut në butonat me zbritje në shiritat e navigimit, pasi Popper nuk përdoret në shiritat e navigimit.
Përmbajtja e menysë
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-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>
Opsionet e zbritjes
Përdorni data-offset
ose data-reference
pë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" 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>
Përdorimi
Nëpërmjet atributeve të të dhënave ose JavaScript-it, shtojca me drop-down ndryshon përmbajtjen e fshehur (menytë rënëse) duke ndërruar .show
klasën në prind .dropdown-menu
. 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ë.
$.noop
)
mouseover
fë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
mouseover
mbajtë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 type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</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 telefononi 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. Kur një funksion përdoret për të përcaktuar kompensimin, ai thirret me një objekt që përmban të dhënat e kompensimit si argument të parë. Funksioni duhet të kthejë një objekt me të njëjtën strukturë. Nyja DOM e elementit nxitës kalohet si argumenti i dytë. Për më shumë informacion referojuni dokumenteve të kompensimit të Popper-it . |
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-it . |
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 . |
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-itObject docs . |
shfaqja | varg | 'dinamik' | Si parazgjedhje, ne përdorim Popper për pozicionim dinamik. Çaktivizoni këtë me static . |
popperConfig | null | Objekt | i pavlefshëm | Për të ndryshuar konfigurimin e paracaktuar të Popper të Bootstrap, shihni konfigurimin e Popper |
Vini re kur boundary
vendoset në ndonjë vlerë tjetër përveç 'scrollParent'
, stili position: static
zbatohet në .dropdown
kontejner.
Metodat
Metoda | Përshkrim |
---|---|
$().dropdown('toggle') |
Ndryshon menynë rënëse të një navigimi të caktuar navigimi ose me skeda. |
$().dropdown('show') |
Shfaq menynë rënëse të një shiriti navigimi të caktuar ose navigimi me skeda. |
$().dropdown('hide') |
Fsheh menynë rënëse të një shiriti të caktuar navigimi ose navigimi me skeda. |
$().dropdown('update') |
Përditëson pozicionin e listës rënëse të një elementi. |
$().dropdown('dispose') |
Shkatërron listën rënëse të një elementi. |
Ngjarjet
Të gjitha ngjarjet me rënie aktivizohen në .dropdown-menu
elementin mëmë dhe kanë një relatedTarget
veti, vlera e së cilës është elementi i ankorimit ndërrues. hide.bs.dropdown
dhe hidden.bs.dropdown
ngjarjet kanë një clickEvent
veti (vetëm kur lloji origjinal i ngjarjes është click
) që përmban një Objekt Ngjarje për ngjarjen e klikimit.
Ngjarje | 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...
})