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ġ.
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. 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 .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" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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-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-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-dark
ma 'eżistenti .dropdown-menu
. L-ebda tibdil mhu meħtieġ għall-oġġetti dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<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:
<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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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 .dropstart
se tidher fuq in-naħa tal-lemin.
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-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>
Dropright
Trigger menus dropdown fuq il-lemin tal-elementi billi żżid .dropend
mal-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">
Dropright
</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 Dropright</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Dropleft
Trigger menus dropdown fuq ix-xellug tal-elementi billi żżid .dropstart
mal-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">
<div class="btn-group dropstart" role="group">
<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>
</div>
<button type="button" class="btn btn-secondary">
Split dropstart
</button>
</div>
Oġġetti tal-menu
Tista 'tuża <a>
jew <button>
elementi bħala oġġetti dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<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.
<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 .active
mal-oġġetti fil-dropdown biex tfassalhom bħala attivi . Biex twassal l-istat attiv għal teknoloġiji ta 'assistenza, uża l- aria-current
attribut — billi tuża l- page
valur għall-paġna kurrenti, jew true
għall-oġġett kurrenti f'sett.
<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 .disabled
mal-oġġetti fil-dropdown biex tfassalhom bħala diżabbli .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
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. Tista 'tbiddel dan bil- .drop*
klassijiet direzzjonali, iżda tista' wkoll tikkontrollahom bi klassijiet ta 'modifikatur addizzjonali.
Żid .dropdown-menu-end
mal- .dropdown-menu
lemin tallinja l-menu dropdown. Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'RTL, jiġifieri .dropdown-menu-end
se tidher fuq in-naħa tax-xellug.
<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
.
<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-end
u .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start
.
<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.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
Kontenut tal-menu
Headers
Żid header biex ittikketta sezzjonijiet tal-azzjonijiet fi kwalunkwe menu dropdown.
<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.
<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.
<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="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>
<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>
Għażliet dropdown
Uża data-bs-offset
jew data-bs-reference
biex tibdel il-post tal-dropdown.
<div class="d-flex">
<div class="dropdown me-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
Offset
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<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- autoClose
għażla li tibdel din l-imġiba tal-dropdown.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
Clickable outside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<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>
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: rgba($black, .15);
$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($gray-900, 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: $dropdown-padding-y $dropdown-item-padding-x;
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- .show
klassi 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.
mouseover
handlers 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
mouseover
jitneħħew.
Via attributi tad-data
Żid data-bs-toggle="dropdown"
ma' link jew buttuna biex taqleb dropdown.
<div class="dropdown">
<button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
Via JavaScript
Ċempel il-dropdowns permezz ta' JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return 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
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-bs-
, bħal f' data-bs-offset=""
. Kun żgur li tibdel 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, minflok tuża data-bs-autoClose="false"
, uża data-bs-auto-close="false"
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
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 . |
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 . |
display |
spag | 'dynamic' |
B'mod awtomatiku, nużaw Popper għal pożizzjonament dinamiku. Iddiżattiva dan b' static . |
offset |
firxa | spag | 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: 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: . Għal aktar informazzjoni irreferi għad-dokumenti tal- offset ta’ Popper . |
autoClose |
boolean | spag | true |
Ikkonfigura l-imġieba tal-għeluq awtomatiku tal-dropdown:
|
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, 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. |
Bl-użu tal-funzjoni mapopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metodi
Metodu | Deskrizzjoni |
---|---|
toggle |
Jaqbel mal-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed. |
show |
Juri l-menu dropdown ta' navbar partikolari jew ta' navigazzjoni bit-tabbed. |
hide |
Jaħbi l-menu dropdown ta' navbar partikolari jew navigazzjoni bit-tabbed. |
update |
Taġġorna l-pożizzjoni ta' dropdown ta' element. |
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) |
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.dropdown
u l- hidden.bs.dropdown
avvenimenti għandhom clickEvent
proprjetà (biss meta t-tip oriġinali tal-Avveniment huwa click
) li fih Oġġett tal-Avveniment għall-avveniment tal-ikklikkja.
Metodu | Deskrizzjoni |
---|---|
show.bs.dropdown |
Nirien immedjatament meta jissejjaħ il-metodu tal-ispettaklu. |
shown.bs.dropdown |
Tispara meta l-dropdown saret viżibbli għall-utent u t-tranżizzjonijiet CSS ikunu lestew. |
hide.bs.dropdown |
Nirien immedjatament meta l-metodu tal-istanza taħbi jkun ġie msejjaħ. |
hidden.bs.dropdown |
Tispara meta l-dropdown ikun spiċċa moħbi mill-utent u t-tranżizzjonijiet CSS ikunu lestew. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})