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.
Ha a JavaScriptet forrásból készíti, akkor ehhezutil.js
.
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.
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" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
És <a>
elemekkel:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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-toggle="dropdown" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</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-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
Útvonalak
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-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</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-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Dropright
Az elemek jobb oldalán lévő legördülő menük aktiválása .dropright
a szülőelemhez való hozzáadással.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Droppleft
Az elemek bal oldalán lévő legördülő menük aktiválása .dropleft
a szülőelemhez való hozzáadással.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
Menüpontok
Történelmileg a legördülő menü tartalmának linkeknek kellett lenniük, de ez már nem így van a v4 esetében. Mostantól opcionálisan <button>
elemeket is használhat a legördülő menükben az s helyett <a>
.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</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.
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Aktív
Adja hozzá .active
az elemekhez a legördülő menüben, hogy aktívnak formázza őket .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Tiltva
Adja hozzá .disabled
az elemekhez a legördülő menüben, hogy letiltottként módosítsa őket .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
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. Add hozzá .dropdown-menu-right
a .dropdown-menu
jobbra igazításhoz a legördülő menüt.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Reszponzív igazítás
Ha reszponzív igazítást szeretne használni, tiltsa le a dinamikus pozicionálást az data-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}-right
:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</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-right
és a gombot .dropdown-menu{-sm|-md|-lg|-xl}-left
.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Vegye figyelembe, hogy nem kell data-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.
Menü tartalma
Fejlécek
Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
Elválasztók
A kapcsolódó menüpontok csoportjai elválasztóval különíthetők el.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
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="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-group">
<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="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<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-offset
vagy data-reference
a gombbal módosíthatja a legördülő menü helyét.
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
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-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.
$.noop
)
mouseover
kezelőket ad hozzá 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-toggle="dropdown"
hivatkozáshoz vagy gombhoz a legördülő menü váltásához.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
JavaScripten keresztül
A legördülő menük meghívása JavaScripten keresztül:
$('.dropdown-toggle').dropdown()
data-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-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-
következőhöz: data-offset=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
beszámítás | szám | húr | funkció | 0 | A legördülő menü eltolása a célhoz képest. Ha egy függvényt használunk az eltolás meghatározására, akkor az eltolási adatokat tartalmazó objektum első argumentumaként kerül meghívásra. A függvénynek egy ugyanolyan szerkezetű objektumot kell visszaadnia. A kiváltó elem DOM csomópontja második argumentumként kerül átadásra. További információkért tekintse meg a Popper-féle eltolási dokumentumokat . |
flip | logikai érték | igaz | Engedélyezze a legördülő menü átfordulását, ha átfedés van a referenciaelemen. További információkért tekintse meg a Popper's flip docs -t . |
határ | húr | elem | 'scrollParent' | A legördülő menü túlcsordulási kényszerhatára. Elfogadja a 'viewport' , 'window' , 'scrollParent' , vagy a HTMLElement hivatkozás értékeit (csak JavaScript). További információkért tekintse meg a Popper preventOverflow dokumentumait . |
referencia | húr | elem | 'váltó' | A legördülő menü hivatkozási eleme. Elfogadja a 'toggle' , 'parent' , vagy egy HTMLElement hivatkozás értékeit. További információkért tekintse meg a Popper referenciaobjektumdokumentumait . |
kijelző | húr | 'dinamikus' | Alapértelmezés szerint a Poppert használjuk a dinamikus pozicionáláshoz. Tiltsa le ezt a segítségével static . |
popperConfig | null | tárgy | nulla | A Bootstrap alapértelmezett Popper konfigurációjának módosításához lásd a Popper konfigurációját |
Ne feledje, ha boundary
az értéktől eltérő értékre van állítva 'scrollParent'
, akkor a stílus a tárolóra position: static
kerül alkalmazásra ..dropdown
Mód
Módszer | Leírás |
---|---|
$().dropdown('toggle') |
Bekapcsolja az adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
$().dropdown('show') |
Megjeleníti egy adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
$().dropdown('hide') |
Elrejti az adott navigációs sáv vagy lapos navigáció legördülő menüjét. |
$().dropdown('update') |
Frissíti egy elem legördülő menüjének pozícióját. |
$().dropdown('dispose') |
Elpusztítja egy elem legördülő menüjét. |
Események
Minden legördülő esemény a .dropdown-menu
szülőelemnél aktiválódik, és van egy relatedTarget
tulajdonsága, amelynek értéke a kapcsoló horgonyelem. 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.
Esemény | Leírás |
---|---|
show.bs.dropdown |
Ez az esemény azonnal aktiválódik, amikor a show példány metódus meghívódik. |
shown.bs.dropdown |
Ez az esemény akkor aktiválódik, amikor a legördülő menü láthatóvá vált a felhasználó számára (megvárja a CSS-átmenetek befejezését). |
hide.bs.dropdown |
Ez az esemény azonnal aktiválódik, amikor a példány elrejtése metódus meghívásra került. |
hidden.bs.dropdown |
Ez az esemény akkor aktiválódik, amikor a legördülő menü elrejtése befejeződött a felhasználó elől (megvárja a CSS-átmenetek befejezését). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})