Dropdowns
Aqleb is-superpożizzjonijiet kuntestwali għall-wiri ta' listi ta' links u aktar bil-plugin dropdown Bootstrap.
Ħ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.js
li fih Popper. Popper ma jintużax biex ipoġġi dropdowns fin-navbars għalkemm peress li l-ippożizzjonar dinamiku mhuwiex meħtieġ.
Jekk qed tibni JavaScript tagħna mis-sors, teħtieġutil.js
.
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- role
u 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-item
elementi 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.
Buttuna waħda
Kwalunkwe wieħed .btn
jista' jinbidel f'toggle dropdown b'xi bidliet fil-markup. Hawn kif tista 'tpoġġihom jaħdmu ma' kwalunkwe <button>
elementi:
<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>
U <a>
b'elementi:
<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>
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-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>
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-split
għal spazjar xieraq madwar il-caret dropdown.
Aħna nużaw din il-klassi żejda biex innaqqsu l-orizzontali padding
fuq kull naħa tal-caret b'25% u neħħi margin-left
dak 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-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>
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-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>
Direzzjonijiet
Dropup
Trigger menus dropdown hawn fuq elementi billi żżid .dropup
mal-element ġenitur.
<!-- 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
Trigger menus dropdown fuq il-lemin tal-elementi billi żżid .dropright
mal-element ġenitur.
<!-- 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
Trigger menus dropdown fuq ix-xellug tal-elementi billi żżid .dropleft
mal-element ġenitur.
<!-- 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>
Oġġetti tal-menu
Storikament il-kontenuti tal-menu dropdown kellhom ikunu links, iżda dan m'għadux il-każ ma v4. Issa tista' b'għażla tuża <button>
elementi fil-dropdowns tiegħek minflok <a>
s biss.
<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>
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.
<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>
Attiva
Żid .active
mal-oġġetti fil-dropdown biex tfassalhom bħala attivi .
<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>
B'diżabilità
Żid .disabled
mal-oġġetti fil-dropdown biex tfassalhom bħala diżabbli .
<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>
Allinjament tal-menu
B'mod awtomatiku, menu dropdown jitqiegħed awtomatikament 100% minn fuq u tul in-naħa tax-xellug tal-ġenitur tiegħu. Żid .dropdown-menu-right
mal- .dropdown-menu
lemin tallinja l-menu dropdown.
<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>
Allinjament reattiv
Jekk trid tuża allinjament li jirrispondu, iddiżattiva l-pożizzjonament dinamiku billi żżid l- data-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}-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>
Biex tallinja xellug il-menu dropdown mal-punt ta 'waqfien mogħti jew akbar, żid .dropdown-menu-right
u .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>
Innota li m'għandekx bżonn iżżid data-display="static"
attribut mal-buttuni dropdown fin-navbars, peress li Popper ma jintużax fin-navbars.
Kontenut tal-menu
Headers
Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.
<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>
Diviżuri
Gruppi separati ta 'oġġetti tal-menu relatati b'diviżur.
<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>
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.
<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ġ.
<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>
Għażliet dropdown
Uża data-offset
jew data-reference
biex tibdel il-post tal-dropdown.
<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>
Użu
Permezz ta' attributi tad-dejta jew JavaScript, il-plugin dropdown jibdel kontenut moħbi (menus dropdown) billi taqleb il- .show
klassi fuq il-ġenitur .dropdown-menu
. L- data-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.
$.noop
)
mouseover
mat-tfal immedjati tal-
<body>
element. Dan il-hack ċertament ikrah huwa meħtieġ biex taħ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
mouseover
jitneħħew.
Via attributi tad-data
Żid data-toggle="dropdown"
ma' link jew buttuna biex taqleb dropdown.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Via JavaScript
Ċempel il-dropdowns permezz ta' JavaScript:
$('.dropdown-toggle').dropdown()
data-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-toggle="dropdown"
huwa dejjem meħtieġ li tkun preżenti fuq l-element grillu dropdown.
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-
, bħal f' data-offset=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
offset | numru | spag | funzjoni | 0 | Tpaċija tal-dropdown relattiv għall-mira tagħha. Meta tintuża funzjoni biex tiddetermina l-offset, tissejjaħ b'oġġett li jkun fih id-dejta tal-offset bħala l-ewwel argument tagħha. Il-funzjoni trid tirritorna oġġett bl-istess struttura. L-element triggering node DOM huwa mgħoddi bħala t-tieni argument. Għal aktar informazzjoni irreferi għad-dokumenti tal- offset ta’ Popper . |
flip | boolean | veru | Ħalli Dropdown jinqaleb f'każ ta' sovrapożizzjoni fuq l-element ta' referenza. Għal aktar informazzjoni irreferi għall- flip docs ta’ Popper . |
fruntiera | spag | element | 'scrollParent' | Limitu ta' restrizzjoni ta' overflow tal-menu dropdown. Jaċċetta l-valuri ta' 'viewport' , 'window' , 'scrollParent' , jew referenza HTMLElement (JavaScript biss). Għal aktar informazzjoni irreferi għad- doks preventOverflow ta' Popper . |
referenza | spag | element | 'toggle' | Element ta' referenza tal-menu dropdown. Jaċċetta l-valuri ta' 'toggle' , 'parent' , jew referenza HTMLElement. Għal aktar informazzjoni irreferi għad-doks ta' referenceObject ta' Popper . |
wiri | spag | 'dinamika' | B'mod awtomatiku, nużaw Popper għal pożizzjonament dinamiku. Iddiżattiva dan b' static . |
popperConfig | null | oġġett | null | Biex tibdel il-konfigurazzjoni default Popper ta' Bootstrap, ara l-konfigurazzjoni ta' Popper |
Innota meta boundary
huwa ssettjat għal kwalunkwe valur minbarra 'scrollParent'
, l-istil position: static
huwa applikat għall- .dropdown
kontenitur.
Metodi
Metodu | Deskrizzjoni |
---|---|
$().dropdown('toggle') |
Jiddawwar il-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed. |
$().dropdown('show') |
Juri l-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed. |
$().dropdown('hide') |
Jaħbi l-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed. |
$().dropdown('update') |
Taġġorna l-pożizzjoni ta' dropdown ta' element. |
$().dropdown('dispose') |
Jeqred id-dropdown ta' element. |
Avvenimenti
L-avvenimenti kollha dropdown huma sparati fuq l .dropdown-menu
-element ġenitur ta '' u għandhom relatedTarget
proprjetà, li l-valur tagħha huwa l-element ta 'ankra toggling. hide.bs.dropdown
u l- hidden.bs.dropdown
avvenimenti għandhom clickEvent
proprjetà (biss meta t-tip ta' avveniment oriġinali huwa click
) li fih Oġġett ta' Avveniment għall-avveniment tal-ikklikkja.
Avveniment | Deskrizzjoni |
---|---|
show.bs.dropdown |
Dan l-avveniment jispara immedjatament meta jissejjaħ il-metodu tal-ispettaklu. |
shown.bs.dropdown |
Dan l-avveniment jiġi sparat meta l-dropdown tkun saret viżibbli għall-utent (se tistenna għal transizzjonijiet CSS, biex jitlestew). |
hide.bs.dropdown |
Dan l-avveniment jiġi sparat immedjatament meta l-metodu tal-istanza taħbi jkun ġie msejjaħ. |
hidden.bs.dropdown |
Dan l-avveniment jiġi sparat meta l-dropdown ikun lest jiġi moħbi mill-utent (se jistenna għal transizzjonijiet CSS, biex jitlestew). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})