Legördülő menük
A Bootstrap legördülő beépülő modullal átkapcsolhatja a kontextus szerinti fedvényeket a hivatkozások és egyebek listájának megjelenítéséhez.
Áttekintés
A legördülő menük váltogathatók, kontextuális fedvények a hivatkozáslisták és egyebek megjelenítéséhez. Interaktívvá teszik őket a mellékelt Bootstrap legördülő JavaScript beépülő modullal. Kattintással válthatók, nem lebegéssel; ez szándékos tervezési döntés .
A legördülő listák egy harmadik féltől származó könyvtárra, a Popperre épülnek , amely dinamikus pozicionálást és nézetablak észlelést biztosít. Ügyeljen arra, hogy a popper.min.js fájlt a Bootstrap JavaScriptje elé írja be, vagy használja a bootstrap.bundle.min.js
/ -t, bootstrap.bundle.js
amely tartalmazza a Poppert. A Poppert nem használják a navigációs sávok legördülő menüinek pozicionálására, mivel nincs szükség dinamikus pozicionálásra.
Megközelíthetőség
A WAI ARIA szabvány egy tényleges role="menu"
widgetet határoz meg , de ez kifejezetten az alkalmazásszerű menükre vonatkozik, amelyek műveleteket vagy funkciókat indítanak el. Az ARIA menük csak menüelemeket, jelölőnégyzet menüelemeket, választógomb menüelemeket, választógomb csoportokat és almenüket tartalmazhatnak.
A Bootstrap legördülő menüi viszont általánosak, és különféle helyzetekben és jelölési struktúrákban alkalmazhatók. Például lehetőség van olyan legördülő menük létrehozására, amelyek további bemeneteket és űrlapvezérlőket tartalmaznak, például keresőmezőket vagy bejelentkezési űrlapokat. Emiatt a Bootstrap nem várja el (és nem adja hozzá automatikusan) a valódi ARIA - menükhöz szükséges role
és attribútumokat. A szerzőknek maguknak kell megadniuk ezeket a konkrétabb attribútumokat.aria-
A Bootstrap azonban beépített támogatást ad a legtöbb szabványos billentyűzet-menü interakcióhoz, például az egyes .dropdown-item
elemek között a kurzorbillentyűk használatával való mozgáshoz és a menü bezárásához a ESCgombbal.
Példák
Tekerje körbe a legördülő menü kapcsolóját (a saját gombját vagy hivatkozását) és a legördülő menüt a .dropdown
, vagy egy másik elembe, amely deklarálja a position: relative;
. Legördülő menük indíthatók a <a>
vagy <button>
elemekből, hogy jobban megfeleljenek az Ön lehetséges igényeinek. Az itt bemutatott példák <ul>
adott esetben szemantikus elemeket használnak, de az egyéni jelölés támogatott.
Egyetlen gomb
Bármelyik .btn
egy legördülő kapcsolóvá alakítható néhány jelölésmódosítással. A következőképpen helyezheti őket működésre bármelyik <button>
elemmel:
<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>
És <a>
elemekkel:
<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>
A legjobb az egészben, hogy ezt bármelyik gombváltozattal megteheti:
<!-- 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 gomb
Hasonlóképpen hozzon létre osztott gombos legördülő listákat, gyakorlatilag ugyanazzal a jelöléssel, mint az egygombos legördülő menük, de a .dropdown-toggle-split
megfelelő távolság érdekében a legördülő menü körül.
Ezt az extra osztályt arra használjuk, padding
hogy 25%-kal csökkentsük a vízszintes szöget a kazetta mindkét oldalán, és eltávolítsuk a margin-left
szokásos gombok legördülő menüihez hozzáadott elemet. Ezek az extra változtatások az osztógomb közepén tartják a mutatót, és megfelelőbb méretű találati területet biztosítanak a fő gomb mellett.
<!-- 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>
Méretezés
A gombok legördülő menüi minden méretű gombbal működnek, beleértve az alapértelmezett és az osztott legördülő gombokat is.
<!-- 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>
Sötét legördülő menük
Iratkozzon fel a sötétebb legördülő menükre, hogy illeszkedjen egy sötét navigációs sávhoz vagy egyéni stílushoz, ha hozzáadja .dropdown-menu-dark
a meglévőhöz .dropdown-menu
. A legördülő elemeken nincs szükség változtatásra.
<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>
És a navigációs sáv használata:
<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>
Útvonalak
RTL
A Bootstrap RTL-ben történő használatakor az irányok tükröződnek, ami .dropstart
a jobb oldalon jelenik meg.
Dropup
Az elemek feletti legördülő menük aktiválása .dropup
a szülőelemhez való hozzáadással.
<!-- 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
Az elemek jobb oldalán lévő legördülő menük aktiválása .dropend
a szülőelemhez való hozzáadással.
<!-- 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>
Droppleft
Az elemek bal oldalán lévő legördülő menük aktiválása .dropstart
a szülőelemhez való hozzáadással.
<!-- 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>
Menüpontok
A <a>
vagy <button>
elemeket legördülő menüként használhatja.
<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>
A segítségével nem interaktív legördülő elemeket is létrehozhat .dropdown-item-text
. Nyugodtan alakíthat tovább stílust egyéni CSS- vagy szöveges segédprogramokkal.
<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>
Aktív
Adja hozzá .active
az elemekhez a legördülő menüben, hogy aktívnak formázza őket . Az aktív állapot kisegítő technológiák számára történő továbbításához használja az aria-current
attribútumot – page
az aktuális oldal vagy true
a készlet aktuális elemének értékét használva.
<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>
Tiltva
Adja hozzá .disabled
az elemekhez a legördülő menüben, hogy letiltottként módosítsa őket .
<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>
Menü igazítás
Alapértelmezés szerint a legördülő menü automatikusan 100%-ban a fölé és bal oldala mentén helyezkedik el. Ezt megváltoztathatja az .drop*
irányosztályokkal, de további módosító osztályokkal is szabályozhatja őket.
Add hozzá .dropdown-menu-end
a .dropdown-menu
jobbra igazításhoz a legördülő menüt. A Bootstrap RTL-ben történő használatakor az irányok tükröződnek, ami .dropdown-menu-end
a bal oldalon jelenik meg.
<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>
Reszponzív igazítás
Ha reszponzív igazítást szeretne használni, tiltsa le a dinamikus pozicionálást az data-bs-display="static"
attribútum hozzáadásával, és használja az adaptív variációs osztályokat.
Ha a legördülő menüt az adott vagy nagyobb törésponthoz szeretné igazítani , adja hozzá a következőt .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>
Ha a bal oldali legördülő menüt az adott törésponthoz vagy nagyobbhoz szeretné igazítani , adja hozzá a .dropdown-menu-end
és a gombot .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>
Vegye figyelembe, hogy nem kell data-bs-display="static"
attribútumot hozzáadnia a navigációs sávok legördülő gombjaihoz, mivel a Poppert nem használják a navigációs sávokban.
Igazítási lehetőségek
A fent bemutatott lehetőségek többségét figyelembe véve itt egy kis konyhai mosogató-demó a különböző legördülő beállítási lehetőségekről egy helyen.
<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>
Menü tartalma
Fejlécek
Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.
<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>
Elválasztók
A kapcsolódó menüpontok csoportjai elválasztóval különíthetők el.
<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>
Szöveg
Helyezzen el bármilyen szabad formájú szöveget egy szöveges legördülő menübe, és használja a térközkezelő segédprogramokat . Vegye figyelembe, hogy valószínűleg további méretezési stílusokra lesz szüksége a menü szélességének korlátozásához.
<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>
Űrlapok
Helyezzen egy űrlapot egy legördülő menübe, vagy tegye azt legördülő menüvé, és használja a margót vagy a kitöltő segédprogramokat , hogy megadja a kívánt negatív helyet.
<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>
Legördülő lehetőségek
A data-bs-offset
vagy data-bs-reference
a gombbal módosíthatja a legördülő menü helyét.
<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>
Automatikus zárási viselkedés
Alapértelmezés szerint a legördülő menü bezárul, ha a legördülő menü belsejébe vagy kívülre kattint. autoClose
A legördülő menü ezen viselkedésének megváltoztatására használhatja a lehetőséget.
<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
Változók
Az összes legördülő menü változói:
$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;
A sötét legördülő menü változói :
$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;
A legördülő menü interaktivitását jelző CSS-alapú caret változók:
$caret-width: .3em;
$caret-vertical-align: $caret-width * .85;
$caret-spacing: $caret-width * .85;
Mixins
Mixineket használnak a CSS-alapú caret-ek generálására, és megtalálhatók 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;
}
}
}
Használat
Az adatattribútumokon vagy a JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menüket) az .show
osztály átváltásával a szülőn .dropdown-menu
. Az data-bs-toggle="dropdown"
attribútumra támaszkodik a legördülő menük alkalmazásszintű bezárásához, ezért célszerű mindig használni.
mouseover
kezelőket ad az
<body>
elem közvetlen gyermekeihez. Erre a bevallottan csúnya feltörésre azért van szükség, hogy megkerüljük
az iOS esemény-delegálásának egy furcsaságát , amely egyébként megakadályozná, hogy a legördülő menün kívüli bármely koppintás elindítsa a legördülő listát bezáró kódot. A legördülő menü bezárása után ezek a további üres
mouseover
kezelők eltávolításra kerülnek.
Adatattribútumokon keresztül
Hozzáadás data-bs-toggle="dropdown"
hivatkozáshoz vagy gombhoz a legördülő menü váltásához.
<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>
JavaScripten keresztül
A legördülő menük meghívása JavaScripten keresztül:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"
továbbra is szükséges
Függetlenül attól, hogy JavaScript-en keresztül hívja-e meg a legördülő menüt, vagy inkább a data-api-t használja, data-bs-toggle="dropdown"
mindig jelen kell lennie a legördülő menü trigger elemén.
Lehetőségek
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-
következőhöz: data-bs-offset=""
. Ügyeljen arra, hogy a beállításnév esettípusát camelCase-ről kebab-case-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például a használata helyett data-bs-autoClose="false"
használja a data-bs-auto-close="false"
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
boundary |
húr | elem | 'clippingParents' |
A legördülő menü túlcsordulási kényszerének határa (csak a Popper preventOverflow módosítójára vonatkozik). Alapértelmezés szerint 'clippingParents' elfogadja a HTMLElement hivatkozást (csak JavaScripten keresztül). További információkért tekintse meg a Popper detectOverflow dokumentumait . |
reference |
húr | elem | tárgy | 'toggle' |
A legördülő menü hivatkozási eleme. Elfogadja a 'toggle' , 'parent' , egy HTMLElement hivatkozás vagy egy objektum értékét getBoundingClientRect . További információkért tekintse meg a Popper konstruktor dokumentumait és a virtuális elemek dokumentumait . |
display |
húr | 'dynamic' |
Alapértelmezés szerint a Poppert használjuk a dinamikus pozicionáláshoz. Tiltsa le ezt a segítségével static . |
offset |
tömb | húr | funkció | [0, 2] |
A legördülő menü eltolása a célhoz képest. Az adatattribútumokban átadhat egy karakterláncot vesszővel elválasztott értékekkel, például: Ha egy függvényt használunk az eltolás meghatározására, akkor egy olyan objektummal hívjuk meg, amely első argumentumaként tartalmazza a popper elhelyezést, a hivatkozást és a popper recteket. A kiváltó elem DOM csomópontja második argumentumként kerül átadásra. A függvénynek egy két számmal rendelkező tömböt kell visszaadnia: . További információkért tekintse meg a Popper-féle eltolási dokumentumokat . |
autoClose |
logikai | húr | true |
Állítsa be a legördülő menü automatikus bezárási viselkedését:
|
popperConfig |
null | tárgy | funkció | null |
A Bootstrap alapértelmezett Popper-konfigurációjának módosításához lásd a Popper konfigurációját . Ha egy függvényt használunk a Popper-konfiguráció létrehozására, akkor azt egy olyan objektummal hívjuk meg, amely tartalmazza a Bootstrap alapértelmezett Popper-konfigurációját. Segítségével használhatja és egyesítheti az alapértelmezett beállításokat saját konfigurációjával. A függvénynek egy konfigurációs objektumot kell visszaadnia a Popper számára. |
A funkció használata apopperConfig
var dropdown = new bootstrap.Dropdown(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
Mód
Módszer | Leírás |
---|---|
toggle |
Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
show |
Megjeleníti egy adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
hide |
Elrejti az adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
update |
Frissíti egy elem legördülő menüjének pozícióját. |
dispose |
Elpusztítja egy elem legördülő menüjét. (Eltávolítja a DOM elemen tárolt adatokat) |
getInstance |
Statikus módszer, amely lehetővé teszi a DOM-elemhez társított legördülő példány lekérését, a következőképpen használhatja:bootstrap.Dropdown.getInstance(element) |
getOrCreateInstance |
Statikus metódus, amely visszaad egy DOM-elemhez társított legördülő menüpéldányt, vagy létrehoz egy újat, ha nem inicializálták. Így használhatod:bootstrap.Dropdown.getOrCreateInstance(element) |
Események
Az összes legördülő esemény a váltóelemnél aktiválódik, majd felfelé buborékolódik. Így eseményfigyelőket is hozzáadhat a .dropdown-menu
szülőelemhez. hide.bs.dropdown
és hidden.bs.dropdown
az eseményeknek van egy clickEvent
tulajdonsága (csak akkor, ha az eredeti eseménytípus click
), amely egy eseményobjektumot tartalmaz a kattintási eseményhez.
Módszer | Leírás |
---|---|
show.bs.dropdown |
Azonnal aktiválódik, amikor a show példány metódus meghívódik. |
shown.bs.dropdown |
Akkor aktiválódik, amikor a legördülő menü láthatóvá vált a felhasználó számára, és a CSS-átmenetek befejeződtek. |
hide.bs.dropdown |
Azonnal aktiválódik, ha a példány elrejtése metódus meghívásra került. |
hidden.bs.dropdown |
Akkor aktiválódik, amikor a legördülő menü el lett rejtve a felhasználó elől, és a CSS-átmenetek befejeződtek. |
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
// do something...
})