Desplegables
Commuteu les superposicions contextuals per mostrar llistes d'enllaços i més amb el connector desplegable Bootstrap.
Visió general
Els menús desplegables són superposicions contextuals alternables per mostrar llistes d'enllaços i molt més. Es fan interactius amb el connector de JavaScript desplegable Bootstrap inclòs. S'activen fent clic, no passant el cursor; aquesta és una decisió de disseny intencionada .
Els desplegables es basen en una biblioteca de tercers, Popper , que proporciona un posicionament dinàmic i detecció de finestres. Assegureu-vos d'incloure popper.min.js abans del JavaScript de Bootstrap o utilitzeu bootstrap.bundle.min.js
/ bootstrap.bundle.js
que conté Popper. Popper no s'acostuma a col·locar els menús desplegables a les barres de navegació, ja que no es requereix un posicionament dinàmic.
Accessibilitat
L' estàndard WAI ARIA defineix un role="menu"
estris real , però això és específic dels menús semblants a aplicacions que desencadenen accions o funcions. Els menús ARIA només poden contenir elements de menú, elements de menú de caselles de selecció, elements de menú de botons d'opció, grups de botons d'opció i submenús.
Els menús desplegables de Bootstrap, d'altra banda, estan dissenyats per ser genèrics i aplicables a una varietat de situacions i estructures de marcatge. Per exemple, és possible crear menús desplegables que continguin entrades addicionals i controls de formulari, com ara camps de cerca o formularis d'inici de sessió. Per aquest motiu, Bootstrap no espera (ni afegeix automàticament) cap dels atributs role
i necessaris per als menús ARIA reals. Els autors hauran d'incloure ells mateixos aquests atributs més específics.aria-
Tanmateix, Bootstrap afegeix suport integrat per a la majoria de les interaccions estàndard del menú del teclat, com ara la possibilitat de moure's per .dropdown-item
elements individuals mitjançant les tecles del cursor i tancar el menú amb la ESCtecla.
Exemples
Emboliqui el commutador del menú desplegable (el teu botó o enllaç) i el menú desplegable dins .dropdown
, o un altre element que declari position: relative;
. Els desplegables es poden activar a partir d' <a>
elements <button>
que s'ajustin millor a les vostres necessitats potencials. Els exemples que es mostren aquí utilitzen <ul>
elements semàntics quan escau, però s'admet el marcatge personalitzat.
Botó únic
Qualsevol sol .btn
es pot convertir en un menú desplegable amb alguns canvis de marcatge. A continuació s'explica com podeu posar-los en funcionament amb qualsevol dels <button>
elements:
<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>
I amb <a>
elements:
<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>
La millor part és que també podeu fer-ho amb qualsevol variant de botó:
<!-- 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>
Botó dividit
De la mateixa manera, creeu menús desplegables de botons dividits amb pràcticament el mateix marcatge que els menús desplegables d'un sol botó, però amb l'addició d' .dropdown-toggle-split
un espai adequat al voltant del cursor desplegable.
Utilitzem aquesta classe addicional per reduir padding
un 25% l'horitzontal a banda i banda del cursor i eliminar el margin-left
que s'afegeix als menús desplegables de botons habituals. Aquests canvis addicionals mantenen el cursor centrat al botó dividit i proporcionen una àrea de mida més adequada al costat del botó principal.
<!-- 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>
Talla
Els menús desplegables de botons funcionen amb botons de totes les mides, inclosos els botons desplegables predeterminats i dividits.
<!-- 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>
Menú desplegable fosc
Opteu per menús desplegables més foscos per fer coincidir una barra de navegació fosca o un estil personalitzat afegint -los .dropdown-menu-dark
a un existent .dropdown-menu
. No cal fer canvis als elements desplegables.
<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>
I fent-lo servir en una barra de navegació:
<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>
Indicacions
RTL
Les indicacions es reflecteixen quan utilitzeu Bootstrap a RTL, és a dir .dropstart
, apareixeran al costat dret.
Dropup
Activa els menús desplegables a sobre dels elements afegint -los .dropup
a l'element principal.
<!-- 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
Activa els menús desplegables a la dreta dels elements afegint -los .dropend
a l'element principal.
<!-- 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
Activa els menús desplegables a l'esquerra dels elements afegint -los .dropstart
a l'element principal.
<!-- 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>
Elements del menú
Podeu utilitzar <a>
o <button>
elements com a elements desplegables.
<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>
També podeu crear elements desplegables no interactius amb .dropdown-item-text
. No dubteu a crear més estil amb CSS o utilitats de text personalitzades.
<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>
Actiu
Afegeix .active
als elements del menú desplegable per dissenyar-los com a actius . Per transmetre l'estat actiu a les tecnologies d'assistència, utilitzeu l' aria-current
atribut, utilitzant el page
valor de la pàgina actual o true
de l'element actual d'un conjunt.
<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>
Inhabilitat
Afegeix .disabled
als elements del menú desplegable per dissenyar-los com a desactivats .
<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>
Alineació del menú
Per defecte, un menú desplegable es col·loca automàticament al 100% des de la part superior i al costat esquerre del seu pare. Podeu canviar-ho amb les .drop*
classes direccionals, però també podeu controlar-les amb classes modificadores addicionals.
Afegeix .dropdown-menu-end
a una .dropdown-menu
alineació a la dreta del menú desplegable. Les indicacions es reflecteixen quan utilitzeu Bootstrap a RTL, és a dir .dropdown-menu-end
, apareixeran al costat esquerre.
<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>
Alineació sensible
Si voleu utilitzar l'alineació sensible, desactiveu el posicionament dinàmic afegint l' data-bs-display="static"
atribut i utilitzeu les classes de variació sensible.
Per alinear a la dreta el menú desplegable amb el punt d'interrupció donat o més gran, afegiu .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>
Per alinear el menú desplegable a l' esquerra.dropdown-menu-end
amb el punt d'interrupció donat o més gran, afegiu i .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>
Tingueu en compte que no cal que afegiu cap data-bs-display="static"
atribut als botons desplegables de les barres de navegació, ja que Popper no s'utilitza a les barres de navegació.
Opcions d'alineació
Prenent la majoria de les opcions que es mostren anteriorment, aquí teniu una petita demostració de la pica de cuina de diverses opcions d'alineació desplegables en un sol lloc.
<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>
Contingut del menú
Capçaleres
Afegiu una capçalera per etiquetar seccions d'accions a qualsevol menú desplegable.
<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>
Divisors
Separeu els grups d'elements de menú relacionats amb un divisor.
<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>
Text
Col·loqueu qualsevol text de forma lliure dins d'un menú desplegable amb text i utilitzeu les utilitats d'espaiat . Tingueu en compte que probablement necessitareu estils de mida addicionals per limitar l'amplada del menú.
<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>
Formes
Col·loqueu un formulari dins d'un menú desplegable o feu-lo en un menú desplegable i utilitzeu les utilitats de marge o farciment per donar-li l'espai negatiu que necessiteu.
<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>
Opcions desplegables
Utilitzeu data-bs-offset
o data-bs-reference
per canviar la ubicació del menú desplegable.
<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>
Comportament de tancament automàtic
Per defecte, el menú desplegable es tanca quan es fa clic dins o fora del menú desplegable. Podeu utilitzar l' autoClose
opció per canviar aquest comportament del menú desplegable.
<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
Les variables
Variables per a tots els desplegables:
$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;
Variables per al menú desplegable fosc :
$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;
Variables per als cursots basats en CSS que indiquen la interactivitat d'un desplegable:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Els mixins s'utilitzen per generar els cursots basats en CSS i es poden trobar a 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;
}
}
}
Ús
Mitjançant atributs de dades o JavaScript, el connector desplegable alterna el contingut ocult (menús desplegables) canviant la .show
classe al pare .dropdown-menu
. Es data-bs-toggle="dropdown"
confia en l'atribut per tancar menús desplegables a nivell d'aplicació, així que és una bona idea utilitzar-lo sempre.
mouseover
controladors buits als fills immediats de l'
<body>
element. Aquest hack, certament lleig, és necessari per evitar una
peculiaritat en la delegació d'esdeveniments d'iOS , que d'altra manera evitaria que un toc en qualsevol lloc fora del menú desplegable desencadenés el codi que tanca el menú desplegable. Un cop tancat el menú desplegable,
mouseover
s'eliminen aquests controladors buits addicionals.
Mitjançant atributs de dades
Afegeix data-bs-toggle="dropdown"
a un enllaç o un botó per canviar un menú desplegable.
<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>
Mitjançant JavaScript
Truqueu als menús desplegables mitjançant JavaScript:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
encara requerit
Independentment de si truqueu al vostre menú desplegable mitjançant JavaScript o utilitzeu l'api de dades, data-bs-toggle="dropdown"
sempre cal que estigui present a l'element activador del menú desplegable.
Opcions
Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-bs-
, com a data-bs-offset=""
. Assegureu-vos de canviar el tipus de cas del nom de l'opció de camelCase a kebab-case quan passeu les opcions mitjançant atributs de dades. Per exemple, en comptes d'utilitzar data-bs-autoClose="false"
, utilitzeu data-bs-auto-close="false"
.
Nom | Tipus | Per defecte | Descripció |
---|---|---|---|
boundary |
cadena | element | 'clippingParents' |
Límit de restricció de desbordament del menú desplegable (només s'aplica al modificador preventOverflow de Popper). Per defecte és 'clippingParents' i pot acceptar una referència HTMLElement (només mitjançant JavaScript). Per obtenir més informació, consulteu els documents detectOverflow de Popper . |
reference |
cadena | element | objecte | 'toggle' |
Element de referència del menú desplegable. Accepta els valors de 'toggle' , 'parent' , una referència HTMLElement o un objecte que proporciona getBoundingClientRect . Per obtenir més informació, consulteu els documents del constructor de Popper i els documents d'elements virtuals . |
display |
corda | 'dynamic' |
Per defecte, utilitzem Popper per al posicionament dinàmic. Desactiveu-ho amb static . |
offset |
matriu | cadena | funció | [0, 2] |
Desplaçament del menú desplegable en relació al seu objectiu. Podeu passar una cadena en atributs de dades amb valors separats per comes com: Quan s'utilitza una funció per determinar el desplaçament, s'anomena amb un objecte que conté la ubicació del popper, la referència i rectes del popper com a primer argument. El node DOM de l'element desencadenant es passa com a segon argument. La funció ha de retornar una matriu amb dos números: . Per obtenir més informació, consulteu els documents d'offset de Popper . |
autoClose |
booleà | corda | true |
Configureu el comportament de tancament automàtic del menú desplegable:
|
popperConfig |
nul | objecte | funció | null |
Per canviar la configuració de Popper per defecte de Bootstrap, vegeu la configuració de Popper . Quan s'utilitza una funció per crear la configuració de Popper, s'anomena amb un objecte que conté la configuració de Popper per defecte de Bootstrap. Us ajuda a utilitzar i combinar el valor predeterminat amb la vostra pròpia configuració. La funció ha de retornar un objecte de configuració per a Popper. |
Utilitzant la funció ambpopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Mètodes
Mètode | Descripció |
---|---|
toggle |
Activa o desactiva el menú desplegable d'una barra de navegació determinada o de la navegació per pestanyes. |
show |
Mostra el menú desplegable d'una barra de navegació determinada o una navegació per pestanyes. |
hide |
Oculta el menú desplegable d'una barra de navegació o navegació per pestanyes determinada. |
update |
Actualitza la posició del menú desplegable d'un element. |
dispose |
Destrueix el menú desplegable d'un element. (Elimina les dades emmagatzemades a l'element DOM) |
getInstance |
Mètode estàtic que us permet obtenir la instància desplegable associada a un element DOM, podeu utilitzar-lo així:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Mètode estàtic que retorna una instància desplegable associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així:bootstrap.Dropdown.getOrCreateInstance(element) |
Esdeveniments
Tots els esdeveniments desplegables es desenvolupen a l'element de commutació i després es fan bombolles. Així, també podeu afegir oients d'esdeveniments a l' .dropdown-menu
element principal de '. hide.bs.dropdown
i hidden.bs.dropdown
els esdeveniments tenen una clickEvent
propietat (només quan el tipus d'esdeveniment original és click
) que conté un objecte d'esdeveniment per a l'esdeveniment de clic.
Mètode | Descripció |
---|---|
show.bs.dropdown |
S'activa immediatament quan es crida al mètode d'instància de mostra. |
shown.bs.dropdown |
S'activa quan el menú desplegable s'ha fet visible per a l'usuari i s'han completat les transicions CSS. |
hide.bs.dropdown |
S'activa immediatament quan s'ha cridat el mètode d'instància oculta. |
hidden.bs.dropdown |
S'activa quan s'ha acabat d'ocultar el menú desplegable per a l'usuari i s'han completat les transicions CSS. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})