Spustni meniji
Preklopite kontekstualne prekrivke za prikaz seznamov povezav in več s spustnim vtičnikom Bootstrap.
Pregled
Spustni meniji so preklopni, kontekstualni prekrivki za prikazovanje seznamov povezav in več. Interaktivni so z vključenim spustnim vtičnikom Bootstrap JavaScript. Preklopijo se s klikom, ne z lebdenjem; to je namerna oblikovalska odločitev .
Spustni meniji so zgrajeni na knjižnici tretje osebe, Popper , ki zagotavlja dinamično pozicioniranje in zaznavanje vidnega polja. Ne pozabite vključiti popper.min.js pred JavaScript Bootstrapa ali uporabite bootstrap.bundle.min.js
/ bootstrap.bundle.js
, ki vsebuje Popper. Popper se ne uporablja za pozicioniranje spustnih menijev v vrsticah za krmarjenje, čeprav dinamično pozicioniranje ni potrebno.
Dostopnost
Standard WAI ARIA definira dejanski role="menu"
gradnik , vendar je to specifično za menije, podobne aplikacijam, ki sprožijo dejanja ali funkcije. Meniji ARIA lahko vsebujejo samo menijske elemente, menijske elemente potrditvenih polj, menijske elemente izbirnih gumbov, skupine izbirnih gumbov in podmenije.
Po drugi strani pa so spustni meniji Bootstrap zasnovani tako, da so generični in uporabni za različne situacije in strukture označevanja. Na primer, mogoče je ustvariti spustne menije, ki vsebujejo dodatne vnose in kontrolnike obrazcev, kot so iskalna polja ali obrazci za prijavo. Iz tega razloga Bootstrap ne pričakuje (niti samodejno doda) nobenega od atributov role
in , potrebnih za prave menije ARIA . Avtorji bodo morali te bolj specifične lastnosti vključiti sami.aria-
Vendar pa Bootstrap dodaja vgrajeno podporo za večino standardnih interakcij z meniji tipkovnice, kot je možnost premikanja po posameznih .dropdown-item
elementih s smernimi tipkami in zapiranje menija s ESCtipko.
Primeri
Zavijte preklop spustnega menija (vaš gumb ali povezava) in spustni meni znotraj .dropdown
ali drug element, ki deklarira position: relative;
. Spustne menije je mogoče sprožiti iz <a>
ali <button>
elementov, da bolje ustrezajo vašim potencialnim potrebam. Tukaj prikazani primeri uporabljajo semantične <ul>
elemente, kjer je to primerno, vendar je podprta oznaka po meri.
En gumb
Vsak posamezen .btn
element lahko spremenite v spustni preklop z nekaj spremembami oznak. Tukaj je opisano, kako jih lahko vključite v delo z obema <button>
elementoma:
<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>
In z <a>
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>
Najboljši del je, da lahko to storite tudi s katero koli različico gumbov:
<!-- 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>
Gumb za razdelitev
Podobno ustvarite spustne menije z ločenimi gumbi s skoraj enakimi oznakami kot spustne menije z enim gumbom, vendar z dodatkom .dropdown-toggle-split
za pravilen razmik okoli spustne kazalke.
Ta dodatni razred uporabljamo za zmanjšanje vodoravnice padding
na obeh straneh kazalke za 25 % in odstranitev, margin-left
ki je dodan za navadne spustne menije gumbov. Te dodatne spremembe ohranjajo kazalko na sredini gumba za razdelitev in zagotavljajo primernejšo velikost območja zadetka poleg glavnega gumba.
<!-- 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>
Dimenzioniranje
Spustni meniji gumbov delujejo z gumbi vseh velikosti, vključno s privzetimi in razdeljenimi spustnimi gumbi.
<!-- 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>
Temni spustni meniji
Izberite temnejše spustne menije, da se ujemajo s temno vrstico za krmarjenje ali slogom po meri, tako da jih dodate .dropdown-menu-dark
obstoječemu .dropdown-menu
. Spustnih elementov ni treba spreminjati.
<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>
In uporaba v vrstici za krmarjenje:
<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>
Navodila
RTL
Ko uporabljate Bootstrap v RTL, se navodila zrcalijo, kar pomeni, da .dropstart
se prikažejo na desni strani.
Dropup
Sprožite spustne menije nad elementi z dodajanjem .dropup
nadrejenemu elementu.
<!-- 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
Sprožite spustne menije na desni strani elementov z dodajanjem .dropend
nadrejenemu elementu.
<!-- 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
Sprožite spustne menije na levi strani elementov z dodajanjem .dropstart
nadrejenemu elementu.
<!-- 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>
Elementi menija
<a>
Elemente ali lahko uporabite <button>
kot spustne elemente.
<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>
Ustvarite lahko tudi neinteraktivne spustne elemente z .dropdown-item-text
. Oblikujte še naprej s CSS po meri ali besedilnimi pripomočki.
<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>
Aktiven
Dodajte .active
elementom v spustnem meniju, da jih oblikujete kot aktivne . Za posredovanje aktivnega stanja podpornim tehnologijam uporabite aria-current
atribut — z uporabo page
vrednosti za trenutno stran ali true
za trenutni element v nizu.
<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>
Onemogočeno
Dodajte .disabled
elementom v spustnem meniju, da jih oblikujete kot onemogočene .
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Poravnava menija
Privzeto je spustni meni samodejno postavljen 100 % od vrha in vzdolž leve strani nadrejenega. To lahko spremenite z usmerjenimi .drop*
razredi, lahko pa jih nadzirate tudi z dodatnimi modifikatorskimi razredi.
Dodajte .dropdown-menu-end
a .dropdown-menu
za poravnavo spustnega menija v desno. Ko uporabljate Bootstrap v RTL, se navodila zrcalijo, kar pomeni, da .dropdown-menu-end
se prikažejo na levi strani.
<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>
Odzivna poravnava
Če želite uporabiti odzivno poravnavo, onemogočite dinamično pozicioniranje z dodajanjem data-bs-display="static"
atributa in uporabite odzivne variacijske razrede.
Če želite poravnati spustni meni z dano ali večjo prelomno točko, dodajte .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>
Če želite levi spustni meni poravnati z dano prelomno točko ali večjo, dodajte .dropdown-menu-end
in .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>
Upoštevajte, da vam ni treba dodati data-bs-display="static"
atributa spustnim gumbom v vrsticah za krmarjenje, saj se Popper ne uporablja v vrsticah za krmarjenje.
Možnosti poravnave
Če upoštevamo večino zgoraj prikazanih možnosti, je tu majhna predstavitev kuhinjskega korita z različnimi možnostmi poravnave spustnega menija na enem mestu.
<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>
Vsebina menija
Glave
Dodajte glavo, da označite razdelke dejanj v katerem koli spustnem meniju.
<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>
Razdelilniki
Ločite skupine povezanih elementov menija z ločevalnikom.
<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>
Besedilo
Postavite poljubno prosto oblikovano besedilo v spustni meni z besedilom in uporabite pripomočke za razmik . Upoštevajte, da boste za omejitev širine menija verjetno potrebovali dodatne sloge velikosti.
<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>
Obrazci
Postavite obrazec v spustni meni ali ga naredite v spustnem meniju in uporabite pripomočke za rob ali oblazinjenje , da mu zagotovite negativni prostor, ki ga potrebujete.
<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>
Spustne možnosti
Uporabite data-bs-offset
ali data-bs-reference
, da spremenite lokacijo spustnega menija.
<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>
Obnašanje samodejnega zapiranja
Privzeto se spustni meni zapre, ko kliknete znotraj ali zunaj spustnega menija. Uporabite lahko autoClose
možnost, da spremenite to vedenje spustnega menija.
<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
Spremenljivke
Spremenljivke za vse spustne menije:
$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($dropdown-link-color, 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;
Spremenljivke za temni spustni meni :
$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;
Spremenljivke za kazalke na osnovi CSS, ki označujejo interaktivnost spustnega menija:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Miksini se uporabljajo za generiranje kazalk na osnovi CSS in jih je mogoče najti v 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;
}
}
}
Uporaba
Spustni vtičnik prek podatkovnih atributov ali JavaScripta preklopi skrito vsebino (spustne menije), tako da preklopi .show
razred na nadrejenem .dropdown-menu
. Atribut data-bs-toggle="dropdown"
se uporablja za zapiranje spustnih menijev na ravni aplikacije, zato je dobro, da ga vedno uporabljate.
mouseover
upravljalnike neposrednim podrejenim
<body>
elementom. Ta nedvomno grdi vdor je potreben, da bi se izognili
čudnemu delegiranju dogodkov v sistemu iOS , ki bi sicer preprečil, da bi dotik kjer koli zunaj spustnega menija sprožil kodo, ki zapre spustni meni. Ko je spustni meni zaprt, so ti dodatni prazni
mouseover
obdelovalci odstranjeni.
Preko podatkovnih atributov
Dodajte data-bs-toggle="dropdown"
na povezavo ali gumb, da preklopite spustni meni.
<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>
Prek JavaScripta
Prikličite spustne menije prek JavaScripta:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
še potrebno
Ne glede na to, ali spustni meni pokličete prek JavaScripta ali namesto tega uporabite data-api, data-bs-toggle="dropdown"
mora biti vedno prisoten v sprožilnem elementu spustnega menija.
Opcije
Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-bs-
, kot v data-bs-offset=""
. Pri posredovanju možnosti prek podatkovnih atributov spremenite vrsto malega črke imena možnosti iz camelCase v kebab-case. Na primer, namesto uporabite data-bs-autoClose="false"
, uporabite data-bs-auto-close="false"
.
Ime | Vrsta | Privzeto | Opis |
---|---|---|---|
boundary |
niz | element | 'clippingParents' |
Meja omejitve prelivanja spustnega menija (velja samo za Popperjev modifikator preventOverflow). Privzeto je 'clippingParents' in lahko sprejme sklic HTMLElement (samo prek JavaScripta). Za več informacij se obrnite na dokumente Popper's detectOverflow . |
reference |
niz | element | predmet | 'toggle' |
Referenčni element spustnega menija. Sprejema vrednosti 'toggle' , 'parent' , reference HTMLElement ali objekta, ki zagotavlja getBoundingClientRect . Za več informacij glejte Popperjeve dokumente o konstruktorjih in dokumente o virtualnih elementih . |
display |
vrvica | 'dynamic' |
Privzeto uporabljamo Popper za dinamično pozicioniranje. Onemogočite to z static . |
offset |
niz | niz | funkcijo | [0, 2] |
Odmik spustnega menija glede na njegov cilj. V podatkovnih atributih lahko posredujete niz z vrednostmi, ločenimi z vejico, kot so: Ko se funkcija uporablja za določanje odmika, se pokliče z objektom, ki vsebuje poper postavitev, referenco in popper rects kot prvi argument. Vozlišče sprožilnega elementa DOM je posredovano kot drugi argument. Funkcija mora vrniti matriko z dvema številoma: . Za več informacij glejte Popperjevo dokumentacijo o offsetu . |
autoClose |
logično | vrvica | true |
Konfigurirajte samodejno zapiranje spustnega menija:
|
popperConfig |
nič | predmet | funkcijo | null |
Če želite spremeniti privzeto konfiguracijo Popperja za Bootstrap, glejte Popperjeva konfiguracija . Ko se funkcija uporabi za ustvarjanje Popperjeve konfiguracije, se pokliče z objektom, ki vsebuje privzeto Popperjevo konfiguracijo Bootstrapa. Pomaga vam pri uporabi in združitvi privzetih nastavitev z vašo lastno konfiguracijo. Funkcija mora vrniti konfiguracijski objekt za Popper. |
Uporaba funkcije zpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Metode
Metoda | Opis |
---|---|
toggle |
Preklopi spustni meni dane navigacijske vrstice ali navigacije z zavihki. |
show |
Prikaže spustni meni dane navigacijske vrstice ali navigacije z zavihki. |
hide |
Skrije spustni meni dane navigacijske vrstice ali navigacije z zavihki. |
update |
Posodobi položaj spustnega menija elementa. |
dispose |
Uniči spustni meni elementa. (Odstrani shranjene podatke v elementu DOM) |
getInstance |
Statično metodo, ki vam omogoča, da dobite spustni primerek, povezan z elementom DOM, jo lahko uporabite takole:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Statična metoda, ki vrne spustni primerek, povezan z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole:bootstrap.Dropdown.getOrCreateInstance(element) |
Dogodki
Vsi spustni dogodki se sprožijo na preklopnem elementu in se nato prikažejo navzgor. Tako lahko dodate tudi poslušalce dogodkov v .dropdown-menu
nadrejeni element. hide.bs.dropdown
in hidden.bs.dropdown
dogodki imajo clickEvent
lastnost (samo če je prvotni tip dogodka click
), ki vsebuje objekt dogodka za dogodek klika.
Metoda | Opis |
---|---|
show.bs.dropdown |
Sproži se takoj, ko se pokliče metoda show instance. |
shown.bs.dropdown |
Sproži se, ko je spustni meni prikazan uporabniku in so prehodi CSS končani. |
hide.bs.dropdown |
Sproži se takoj, ko je bila poklicana metoda hide instance. |
hidden.bs.dropdown |
Sproži se, ko spustni meni ni več skrit pred uporabnikom in so prehodi CSS končani. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})