Menu rozwijane
Przełącz nakładki kontekstowe do wyświetlania list linków i nie tylko za pomocą rozwijanej wtyczki Bootstrap.
Listy rozwijane to przełączalne, kontekstowe nakładki do wyświetlania list linków i nie tylko. Są interaktywne dzięki dołączonej wtyczce JavaScript rozwijanej Bootstrap. Są przełączane przez kliknięcie, a nie przez najechanie; jest to celowa decyzja projektowa.
Menu rozwijane są oparte na bibliotece innej firmy, Popper.js , która zapewnia dynamiczne pozycjonowanie i wykrywanie widocznego obszaru. Pamiętaj, aby dołączyć popper.min.js przed JavaScriptem Bootstrap lub użyć bootstrap.bundle.min.js
/ bootstrap.bundle.js
który zawiera Popper.js. Popper.js nie jest używany do pozycjonowania list rozwijanych w paskach nawigacyjnych, ponieważ dynamiczne pozycjonowanie nie jest wymagane.
Jeśli budujesz nasz JavaScript ze źródeł, wymagautil.js
to .
Standard WAI ARIA definiuje rzeczywisty role="menu"
widżet , ale jest to specyficzne dla menu aplikacji, które uruchamiają akcje lub funkcje. Menu ARIA mogą zawierać tylko pozycje menu, pozycje menu pól wyboru, pozycje menu przycisków opcji, grupy przycisków opcji i podmenu.
Z drugiej strony listy rozwijane Bootstrap są zaprojektowane tak, aby były ogólne i miały zastosowanie do różnych sytuacji i struktur znaczników. Na przykład możliwe jest tworzenie list rozwijanych zawierających dodatkowe dane wejściowe i kontrolki formularzy, takie jak pola wyszukiwania lub formularze logowania. Z tego powodu Bootstrap nie oczekuje (ani automatycznie nie dodaje) żadnego z atrybutów role
i aria-
wymaganych dla prawdziwych menu ARIA . Autorzy będą musieli sami uwzględnić te bardziej szczegółowe atrybuty.
Jednak Bootstrap dodaje wbudowaną obsługę większości standardowych interakcji menu klawiatury, takich jak możliwość poruszania się po poszczególnych .dropdown-item
elementach za pomocą klawiszy kursora i zamykania menu za pomocą ESCklawisza.
Zawiń przełącznik listy rozwijanej (przycisk lub link) i menu rozwijane w obrębie .dropdown
, lub innego elementu, który deklaruje position: relative;
. Listy rozwijane mogą być uruchamiane z elementów <a>
lub <button>
elementów, aby lepiej pasowały do Twoich potencjalnych potrzeb.
Każdy singiel .btn
można zmienić w rozwijany przełącznik z pewnymi zmianami znaczników. Oto, jak możesz je wykorzystać do pracy z dowolnymi <button>
elementami:
<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>
Oraz z <a>
elementami:
<div class="dropdown show">
<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>
Najlepsze jest to, że możesz to zrobić również z dowolnym wariantem przycisku:
Podobnie, utwórz listy rozwijane z podzielonymi przyciskami z praktycznie tym samym znacznikiem, co listy rozwijane z jednym przyciskiem, ale z dodatkiem .dropdown-toggle-split
odpowiedniego odstępu wokół karetki rozwijanej.
Używamy tej dodatkowej klasy, aby zmniejszyć poziom padding
po obu stronach karetki o 25% i usunąć margin-left
tę dodaną do zwykłych rozwijanych przycisków. Te dodatkowe zmiany utrzymują kursor na środku przycisku podziału i zapewniają bardziej odpowiedni rozmiar obszaru trafienia obok głównego przycisku.
Rozwijane przyciski działają z przyciskami wszystkich rozmiarów, w tym z przyciskami domyślnymi i dzielonymi przyciskami rozwijanymi.
Wyzwalaj menu rozwijane nad elementami, dodając .dropup
je do elementu nadrzędnego.
Uruchom menu rozwijane po prawej stronie elementów, dodając .dropright
je do elementu nadrzędnego.
Wyzwalaj menu rozwijane po lewej stronie elementów, dodając .dropleft
je do elementu nadrzędnego.
Historycznie zawartość menu rozwijanego musiała być linkami, ale tak już nie jest w przypadku v4. Teraz możesz opcjonalnie używać <button>
elementów w listach rozwijanych zamiast samych <a>
s.
<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>
Domyślnie menu rozwijane jest automatycznie umieszczane w 100% od góry i wzdłuż lewej strony swojego rodzica. Dodaj .dropdown-menu-right
do .dropdown-menu
prawej wyrównaj menu rozwijane.
Heads-up! Listy rozwijane są pozycjonowane dzięki Popper.js (z wyjątkiem sytuacji, gdy są zawarte w pasku nawigacyjnym).
<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>
Dodaj nagłówek, aby oznaczyć sekcje działań w dowolnym menu rozwijanym.
<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>
Oddziel grupy powiązanych pozycji menu za pomocą przegrody.
<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>
Umieść formularz w rozwijanym menu lub przekształć go w rozwijane menu i użyj narzędzi do marginesów lub dopełniania , aby nadać mu wymaganą ujemną przestrzeń.
<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>
Dodaj .active
do elementów na liście rozwijanej, aby nadać im styl jako aktywne .
<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>
Dodaj .disabled
do elementów na liście rozwijanej, aby nadać im styl jako wyłączone .
<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>
Poprzez atrybuty danych lub JavaScript, rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .show
klasę w elemencie listy nadrzędnej. Atrybut jest data-toggle="dropdown"
wykorzystywany do zamykania menu rozwijanych na poziomie aplikacji, dlatego warto zawsze go używać.
Na urządzeniach z obsługą dotykową otwarcie listy rozwijanej dodaje puste ( $.noop
) mouseover
procedury obsługi do bezpośrednich elementów <body>
podrzędnych elementu. Ten wprawdzie brzydki hack jest konieczny, aby obejść dziwactwo w delegowaniu zdarzeń w iOS , które w przeciwnym razie uniemożliwiłoby stuknięcie w dowolnym miejscu poza menu rozwijanym przed uruchomieniem kodu, który zamyka menu. Po zamknięciu listy rozwijanej te dodatkowe puste mouseover
moduły obsługi są usuwane.
Dodaj data-toggle="dropdown"
do linku lub przycisku, aby przełączyć listę rozwijaną.
Wywołaj listy rozwijane za pomocą JavaScript:
data-toggle="dropdown"
nadal wymagane
Niezależnie od tego, czy wywołasz listę rozwijaną za pomocą JavaScript, czy zamiast tego użyjesz interfejsu API danych, data-toggle="dropdown"
zawsze musi być obecny w elemencie wyzwalacza listy rozwijanej.
Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-
, jak w data-offset=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
zrównoważyć | numer | ciąg | funkcjonować | 0 | Przesunięcie listy rozwijanej względem jej celu. Więcej informacji można znaleźć w dokumentacji offsetowej Popper.js . |
trzepnięcie | logiczne | PRAWDA | Zezwól na odwrócenie listy rozwijanej w przypadku nakładania się elementu odniesienia. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją flip Popper.js . |
granica | ciąg | element | 'przewiń Rodzic' | Granica ograniczenia przepełnienia menu rozwijanego. Akceptuje wartości 'viewport' , 'window' , 'scrollParent' lub odwołania HTMLElement (tylko JavaScript). Aby uzyskać więcej informacji, zapoznaj się z dokumentacją PreventOverflow Popper.js . |
Zwróć uwagę, że gdy boundary
jest ustawiona na dowolną wartość inną niż 'scrollParent'
, styl position: static
jest stosowany do .dropdown
kontenera.
metoda | Opis |
---|---|
$().dropdown('toggle') |
Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach. |
$().dropdown('update') |
Aktualizuje pozycję listy rozwijanej elementu. |
$().dropdown('dispose') |
Niszczy listę rozwijaną elementu. |
Wszystkie zdarzenia rozwijane są uruchamiane w .dropdown-menu
elemencie nadrzędnym i mają relatedTarget
właściwość, której wartością jest przełączający element zakotwiczenia.
Wydarzenie | Opis |
---|---|
show.bs.dropdown |
To zdarzenie jest wyzwalane natychmiast po wywołaniu metody wystąpienia show. |
shown.bs.dropdown |
To zdarzenie jest wywoływane, gdy lista rozwijana jest widoczna dla użytkownika (poczeka na przejście CSS, aby zakończyć). |
hide.bs.dropdown |
To zdarzenie jest wywoływane natychmiast po wywołaniu metody hide wystąpienia. |
hidden.bs.dropdown |
To zdarzenie jest wywoływane, gdy menu rozwijane jest ukrywane przed użytkownikiem (poczeka na przejście CSS, aby zakończyć). |