Source

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 Popper.js -re épülnek , amely dinamikus pozicionálást és nézetablak észlelést biztosít. Feltétlenül szerepeltesse a popper.min.js fájlt a Bootstrap JavaScriptje előtt, vagy használja a bootstrap.bundle.min.js/ bootstrap.bundle.js-t, amely tartalmazza a Popper.js-t. A Popper.js-t nem használják a navigációs sávok legördülő menüinek elhelyezésére, 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-itemelemek 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 .btnegy 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="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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-haspopup="true" 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-splitmegfelelő távolság érdekében a legördülő menü körül.

Ezt az extra osztályt arra használjuk, paddinghogy 25%-kal csökkentsük a vízszintes szöget a kazetta mindkét oldalán, és eltávolítsuk a margin-leftszoká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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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-haspopup="true" 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 .dropupa 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-haspopup="true" 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-haspopup="true" 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 .droprighta 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-haspopup="true" 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-haspopup="true" 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 .droplefta 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-haspopup="true" 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" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" 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>

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" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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á .activeaz 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á .disabledaz 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" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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-righta .dropdown-menujobbra igazításhoz a legördülő menüt.

Fel a fejjel! A legördülő menük elhelyezése a Popper.js-nek köszönhető (kivéve, ha a navigációs sávban találhatók).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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>

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-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

A data-offsetvagy data-referencea 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" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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

Adatattribútumokon vagy JavaScripten keresztül a legördülő beépülő modul átkapcsolja a rejtett tartalmat (legördülő menük) az .showosztály átváltásával a szülőlistaelemen. Az data-toggle="dropdown"attribútum a legördülő menük alkalmazásszintű bezárásához támaszkodik, ezért célszerű mindig használni.

Érintésképes eszközökön a legördülő menü megnyitása üres ( $.noop) mouseoverkezelő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ő listán kívül bárhol megérintse 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 mouseoverkezelő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 id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </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. További információkért tekintse meg a Popper.js offset dokumentumait .
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.js flip docs -ját .
határ	húr \| elem	'scrollParent'	A legördülő menü túlcsordulási kényszerhatára. Elfogadja a `'viewport'`, `'window'`, `'scrollParent'`, vagy egy HTMLElement hivatkozás értékeit (csak JavaScript). További információkért tekintse meg a Popper.js 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.js referenciaobjektumdokumentumait .
kijelző	húr	'dinamikus'	Alapértelmezés szerint a Popper.js-t használjuk a dinamikus pozicionáláshoz. Tiltsa le ezt a segítségével `static`.

Ne feledje, ha boundaryaz értéktől eltérő értékre van állítva 'scrollParent', akkor a stílus a tárolóra position: statickerü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('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-menuszülőelemnél aktiválódik, és van egy relatedTargettulajdonsága, amelynek értéke a kapcsoló horgonyelem. hide.bs.dropdownés hidden.bs.dropdownaz eseményeknek van egy clickEventtulajdonsá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…
})

Legördülő menük

Áttekintés

Megközelíthetőség

Példák

Egyetlen gomb

Split gomb

Méretezés

Útvonalak

Dropup

Dropright

Droppleft

Menüpontok

Aktív

Tiltva

Menü igazítás

Menü tartalma

Fejlécek

Elválasztók

Szöveg

Űrlapok

Használat

Adatattribútumokon keresztül

JavaScripten keresztül

`data-toggle="dropdown"`továbbra is szükséges

Lehetőségek

Mód

Események

Legördülő menük

Áttekintés

Megközelíthetőség

Példák

Egyetlen gomb

Split gomb

Méretezés

Útvonalak

Dropup

Dropright

Droppleft

Menüpontok

Aktív

Tiltva

Menü igazítás

Menü tartalma

Fejlécek

Legördülő fejléc

Elválasztók

Szöveg

Űrlapok

Legördülő lehetőségek

Használat

Adatattribútumokon keresztül

JavaScripten keresztül

data-toggle="dropdown"továbbra is szükséges

Lehetőségek

Mód

Események

`data-toggle="dropdown"`továbbra is szükséges