Dropdowns
Bi pêveka daketinê ya Bootstrap re ji bo nîşandana navnîşên lînkan û hêj bêtir pêveberên kontekstê biguherînin.
Têgihiştinî
Dropdown ji bo xuyangkirina navnîşên lînkan û hêj bêtir veguheztin, serpêhatiyên kontekstê ne. Ew bi pêveka dakêşana JavaScript-ê ya Bootstrap-ê ve girêdayî têne çêkirin. Ew bi tikandinê têne guheztin, ne bi hejandinê; ev biryarek sêwiranê ye .
Dropdowns li ser pirtûkxaneyek partiya sêyem, Popper , ku cîhê dînamîk û vedîtina dîmenderê peyda dike, têne çêkirin. Pê bawer bin ku berî JavaScript-a Bootstrap-ê popper.min.js têxinbootstrap.bundle.min.js
nav xwe an jî bikar bînin / bootstrap.bundle.js
ya ku Popper heye. Popper nayê bikar anîn ku dakêşan di navbaran de bi cih bike her çend ji ber ku pozîsyona dînamîkî ne hewce ye.
Gihîştina
Standarda WAI ARIArole="menu"
widgetek rastîn diyar dike , lê ev taybetî ji bo pêşekên wekî serîlêdanê yên ku kiryar an fonksiyonan didin destpêkirin e. Pêşekên ARIA tenê dikarin hêmanên menu, hêmanên menuya qutiya kontrolê, hêmanên menuya bişkojka radyoyê, komên bişkojka radyoyê û jêr-pêşekan hebin.
Ji hêla din ve, dakêşanên Bootstrap têne sêwirandin ku ji bo cûrbecûr rewş û strukturên nîşankirinê gelemperî bin û werin sepandin. Mînakî, gengaz e ku meriv pelên dakêşan biafirîne ku têketinên zêde û kontrolên formê dihewîne, wek qadên lêgerînê an formên têketinê. Ji ber vê yekê, Bootstrap ne li bendê ye (ne jî bixweber lê zêde bike) yek ji wan role
û aria-
taybetmendiyên ku ji bo pêşekên ARIA -ya rastîn hewce ne. Nivîskar neçar in ku van taybetmendiyên taybetî bi xwe vekin.
Lêbelê, Bootstrap ji bo piraniya danûstendinên menuya klavyeyê yên standard piştgirîya çêkirî lê zêde dike, wek mînak şiyana ku meriv di nav .dropdown-item
hêmanên kesane de bi karanîna bişkokên pîvazê bigere û menuyê bi ESCbişkojkê bigire.
Examples
Veguheztina dakêşanê (bişkojka xwe an girêdana xwe) û menuya dakêşanê di hundurê de .dropdown
, an hêmanek din a ku diyar dike, bipêçin position: relative;
. Dropdown dikarin ji <a>
an <button>
hêmanan werin avêtin da ku çêtir hewcedariyên weyên potansiyel bicîh bînin. Mînakên ku li vir têne xuyang kirin li cîhê ku pêdivî ye hêmanên semantîk bikar tînin <ul>
, lê nîşankirina xwerû tê piştgirî kirin.
Bişkojka yekane
Her yek yek .btn
dikare bi hin guhertinên nîşankirinê ve were veguheztinek dakêşan. Li vir çawa hûn dikarin wan bi her <button>
hêmanan re bixebitin:
<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>
Û bi <a>
hêmanên:
<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>
Beşa çêtirîn ev e ku hûn dikarin bi her cûrbecûr bişkojkê re jî bikin:
<!-- 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>
Split button
Bi heman rengî, bişkojkên veqetandî bi hema hema bi heman nîşankirinê wekî dakêşanên yek bişkokê, lê bi lêzêdekirina ji .dropdown-toggle-split
bo cîhê rast li dora kêşeya dakêşanê biafirînin.
Em vê pola zêde bikar tînin da ku horizontî padding
li her du aliyên xêzikê% 25 kêm bikin û ya margin-left
ku ji bo daxistina bişkojka birêkûpêk hatî zêdekirin jêbirin. Van guheztinên zêde hêlînê di bişkoka dabeşkirinê de navend dihêlin û li kêleka bişkoka sereke deverek lêdanek bi guncantir peyda dikin.
<!-- 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>
Mezinbûn
Daxistina bişkokan bi bişkokên her mezinahî re dixebitin, tevî bişkokên dakêşanê yên xwerû û dabeşkirî.
<!-- 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>
Daxistinan tarî
Vebijêrin daketinên tarîtir da ku bi navbarek tarî an şêwazek xwerû bi lêzêdekirina .dropdown-menu-dark
navberek heyî re li hev bikin .dropdown-menu
. Di hêmanên daketî de guherandin ne hewce ye.
<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>
Û wê di navbarê de bikar bînin:
<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>
Tarîfa bikaranînê
RTL
Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin, tê vê wateyê ku .dropstart
dê li milê rastê xuya bibe.
Dropup
.dropup
Bi lêzêdekirina li hêmana dêûbav pêşekên daketinê yên li jor vekin.
<!-- 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
.dropend
Bi lêzêdekirina li hêmana dêûbav pêşekên dakêşanê li milê rastê hêmanan vekin.
<!-- 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
.dropstart
Bi lêzêdekirina li hêmana dêûbav pêşekên dakêşanê li milê çepê hêmanan vekin.
<!-- 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>
Tiştên menu
Hûn dikarin <a>
an <button>
hêmanan wekî hêmanên dakêşanê bikar bînin.
<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>
Her weha hûn dikarin bi .dropdown-item-text
. Dilxwazin ku bi CSS-ya xwerû an karûbarên nivîsê bêtir şêwaz bikin.
<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>
Jîr
.active
Tiştên di pelika dakêşanê de zêde bikin da ku wan wekî çalak şêwaz bikin . Ji bo gihandina rewşa çalak ji teknolojiyên arîkar re, aria-current
taybetmendiyê bikar bînin - page
nirxê ji bo rûpela heyî, an true
ji bo tiştê heyî di komekê de bikar bînin.
<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êmecel
.disabled
Tiştên di pelika daketinê de lê zêde bikin da ku wan wekî neçalak şêwaz bikin .
<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>
Alignment menu
Ji hêla xwerû ve, pêşekek dakêşanê bixweber 100% ji jor û li milê çepê yê dêûbavê xwe tê danîn. Hûn dikarin vê bi .drop*
dersên rêwerzan biguhezînin, lê hûn dikarin wan bi dersên guhêrbar ên din jî kontrol bikin.
Pêşeka daketinê .dropdown-menu-end
li a .dropdown-menu
ber bi rastê ve zêde bikin. Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin, tê vê wateyê ku .dropdown-menu-end
dê li milê çepê xuya bibe.
<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>
Lihevhatina bersivdar
Heke hûn dixwazin hevrêziya bersivdar bikar bînin, bi lêzêdekirina taybetmendiyê pozîsyona dînamîkî neçalak bikin data-bs-display="static"
û çînên guheztina bersivdar bikar bînin.
Ji bo ku menuya dakêşanê ya rast.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end
bi xala veqetandinê ya diyarkirî an mezintir hevrêz bikin, lê zêde bikin.
<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>
Ji bo ku menuya daketinê ya çepê bi xala veqetînê ya diyarkirî an mezintir re hevrêz bikin, lê zêde bikin .dropdown-menu-end
û .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>
Bala xwe bidinê ku hûn ne hewce ne ku data-bs-display="static"
taybetmendiyek li bişkokên dakêşanê yên di navbaran de zêde bikin, ji ber ku Popper di navbaran de nayê bikar anîn.
Vebijarkên Alignment
Bi girtina piraniya vebijarkên ku li jor hatine xuyang kirin, li vir demoyek piçûk a metbexê heye ku vebijarkên cûrbecûr rêzkirina dakêşanê li yek cîhek heye.
<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>
Naveroka menu
Headers
Sernavek lê zêde bikin da ku beşên çalakiyan di her menuya dakêşanê de nîşan bikin.
<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>
Dividers
Komên hêmanên menuya têkildar bi dabeşkerek veqetînin.
<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>
Nivîstok
Her metnek belaş di nav pêşekek dakêşanê de bi nivîsê ve bi cîh bikin û karûbarên valakirinê bikar bînin . Bala xwe bidinê ku hûn ê muhtemelen hewceyê şêwazên mezinbûnê yên din bin da ku firehiya menuyê asteng bikin.
<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>
Forms
Formek di nav pêşekek dakêşanê de bixin, an jî wê bikin menuyek dakêşanê, û karûbarên marjînal an peldankê bikar bînin da ku cîhê neyînî ya ku hûn hewce dikin bidin wê.
<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>
Vebijarkên Dropdown
Bikaranîn data-bs-offset
an data-bs-reference
ji bo guheztina cîhê dakêşanê.
<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>
Tevgera girtina otomatîkî
Ji hêla xwerû ve, dema ku li hundur an derveyî menuya dakêşanê bitikîne, menuya dakêşanê girtî ye. Hûn dikarin autoClose
vebijarkê bikar bînin da ku vê tevgera dakêşanê biguhezînin.
<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
Variables
Guherbarên ji bo hemî dakêşan:
$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;
Guherbarên ji bo daketina tarî :
$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;
Guherbarên ji bo lêkerên CSS-ê yên ku înteraktîfek dakêşanê destnîşan dikin:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Mixins têne bikar anîn da ku kartên bingehîn ên CSS-ê hilberînin û di nav de têne dîtin 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;
}
}
}
Bikaranîna
Bi navgîniya taybetmendiyên daneyê an JavaScriptê ve, pêveka dakêşanê naveroka veşartî (menekên dakêşan) bi guheztina .show
pola li ser dêûbav diguhezîne .dropdown-menu
. Taybetmendî data-bs-toggle="dropdown"
ji bo girtina pêşekên dakêşanê di astek serîlêdanê de pê ve girêdayî ye, ji ber vê yekê ramanek baş e ku hûn her gav wê bikar bînin.
mouseover
li zarokên tavilê yên
<body>
hêmanê zêde dike. Ev hacka bêkêmasî ya nebaş pêdivî ye ku meriv
di delegasyona bûyera iOS-ê de li dor xeletiyek bixebite , ku wekî din rê li ber tepek li cîhek derveyî dakêşanê bigire ku koda ku dakêşanê digire dest pê bike. Dema ku dakêşandin girtî be, ev
mouseover
rêkarên vala yên zêde têne rakirin.
Bi taybetmendiyên daneyê
Ji data-bs-toggle="dropdown"
bo guheztina peldankekê li lînkek an bişkokek zêde bikin.
<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>
Bi JavaScript
Bi navgîniya JavaScript-ê ve bang bikin:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
hîn jî pêwîst e
Her çiqas hûn bi JavaScript-ê ve gazî daketina xwe bikin an li şûna data-api-ê bikar bînin, data-bs-toggle="dropdown"
pêdivî ye ku her gav li ser hêmana dakêşanê hebe.
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-
, wekî di data-bs-offset=""
. Dema ku vebijarkan bi taybetmendiyên daneyê re derbas dikin, pê ewle bin ku celebê doza navê vebijarkê ji camelCase biguhezînin kebab-case. Mînakî, li şûna ku bikar bînin data-bs-autoClose="false"
, bikar bînin data-bs-auto-close="false"
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
boundary |
string | pêve | 'clippingParents' |
Sînorê astengiya Overflow ya menuya dakêşanê (tenê ji bo guhezkera preventOverflow ya Popper derbas dibe). Bi xwerû ew e 'clippingParents' û dikare referansek HTMLElement (tenê bi JavaScriptê) qebûl bike. Ji bo bêtir agahdarî serî li belgeyên detectOverflow yên Popper bidin . |
reference |
string | element | tişt | 'toggle' |
Hêmana referansê ya menuya dakêşanê. Nirxên 'toggle' , 'parent' , referansa HTMLElement an jî tiştek peyda dike qebûl dike getBoundingClientRect . Ji bo bêtir agahdarî serî li belgeyên çêker û belgeyên hêmana virtual ya Popper bidin . |
display |
ben | 'dynamic' |
Bi xwerû, em Popper-ê ji bo pozîsyona dînamîkî bikar tînin. Vê bi neçalak bike static . |
offset |
array | string | karî | [0, 2] |
Berhevkirina dakêşanê li gorî armanca xwe. Hûn dikarin rêzek di taybetmendiyên daneyê de bi nirxên veqetandî yên wek: Dema ku fonksiyonek ji bo destnîşankirina offset tê bikar anîn, ew bi tiştek ku cîhê popper, referans, û rekteyên popper wekî argumana wê ya yekem vedihewîne tê gotin. Hêmana destkêşanê ya DOM-ê wekî argumana duyemîn derbas dibe. Fonksiyon divê arrayek bi du hejmaran vegerîne: . Ji bo bêtir agahdarî serî li belgeyên offset ên Popper bidin . |
autoClose |
boolean | ben | true |
Tevgera girtina otomatîkî ya dakêşanê mîheng bikin:
|
popperConfig |
null | object | karî | null |
Ji bo guherandina veavakirina Popperê ya xwerû ya Bootstrap, li veavakirina Popper binêre . Dema ku fonksiyonek ji bo afirandina veavakirina Popper tê bikar anîn, ew bi hêmanek ku veavakirina Popper-a xwerû ya Bootstrap-ê vedihewîne tê gotin. Ew ji we re dibe alîkar ku hûn xwerû bi veavakirina xwe re bikar bînin û hev bikin. Pêdivî ye ku fonksiyon ji bo Popper tiştek veavakirinê vegerîne. |
Bikaranîna fonksiyonê bipopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Methods
Awa | Terîf |
---|---|
toggle |
Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabloyê vedike. |
show |
Menûya dakêşanê ya navbarek diyarkirî an navîgasyonek tabelê nîşan dide. |
hide |
Menûya dakêşana navbarek diyarkirî an navîgasyonek tablo vedişêre. |
update |
Positiona dakêşana hêmanek nûve dike. |
dispose |
Daxistina elementek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike) |
getInstance |
Rêbaza statîkî ya ku dihêle hûn mînakek dakêşanê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, hûn dikarin wê bi vî rengî bikar bînin:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Rêbaza statîk a ku mînakek dakêşanê ya ku bi hêmanek DOM-ê ve girêdayî ye vedigerîne an heke ew nehatibe destpêkirin yek nû diafirîne. Hûn dikarin wê bi vî rengî bikar bînin:bootstrap.Dropdown.getOrCreateInstance(element) |
Events
Hemî bûyerên dakêşanê li ser hêmana guheztinê têne şewitandin û dûv re têne hilanîn. Ji ber vê yekê hûn dikarin guhdarên bûyerê li ser .dropdown-menu
hêmana dêûbav jî lê zêde bikin. hide.bs.dropdown
û hidden.bs.dropdown
bûyeran clickEvent
taybetmendiyek heye (tenê gava ku celebê Bûyerê ya orîjînal be click
) ku ji bo bûyera klîk Tiştek Bûyerê dihewîne.
Awa | Terîf |
---|---|
show.bs.dropdown |
Dema ku rêbaza mînaka nîşandanê tê gazîkirin tavilê dişewite. |
shown.bs.dropdown |
Dema ku dakêşana ji bikarhênerê re xuya bû û veguheztinên CSS qediyan, tê şewitandin. |
hide.bs.dropdown |
Dema ku rêbaza mînaka veşartinê hate gazîkirin tavilê dişewite. |
hidden.bs.dropdown |
Dema ku dakêşana ku ji bikarhêner ve hatî veşartin xilas bû û veguheztina CSS qediya. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})