Menu rozwijane
Przełącz nakładki kontekstowe do wyświetlania list linków i nie tylko za pomocą rozwijanej wtyczki Bootstrap.
Przegląd
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 Poppera innej firmy , która zapewnia dynamiczne pozycjonowanie i wykrywanie widocznych obszarów. Pamiętaj, aby dołączyć popper.min.js przed JavaScriptem Bootstrap lub użyć bootstrap.bundle.min.js
/ bootstrap.bundle.js
który zawiera Poppera. Popper 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 .
Dostępność
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żna tworzyć listy rozwijane zawierające 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.
Przykłady
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.
Pojedynczy przycisk
Każdy singiel .btn
można zmienić w rozwijany przełącznik z pewnymi zmianami znaczników. Oto, jak możesz zmusić je do pracy z dowolnymi <button>
elementami:
<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>
Oraz z <a>
elementami:
<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>
Najlepsze jest to, że możesz to zrobić również z dowolnym wariantem przycisku:
<!-- 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>
Przycisk podziału
Podobnie, utwórz listy rozwijane z dzielonymi 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.
<!-- 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>
Rozmiary
Rozwijane przyciski działają z przyciskami wszystkich rozmiarów, w tym z przyciskami domyślnymi i dzielonymi przyciskami rozwijanymi.
<!-- 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>
Wskazówki
Dropup
Wyzwalaj menu rozwijane nad elementami, dodając .dropup
je do elementu nadrzędnego.
<!-- 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
Uruchom menu rozwijane po prawej stronie elementów, dodając .dropright
je do elementu nadrzędnego.
<!-- 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>
Dropleft
Wyzwalaj menu rozwijane po lewej stronie elementów, dodając .dropleft
je do elementu nadrzędnego.
<!-- 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>
Elementy menu
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" 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>
Możesz także tworzyć nieinteraktywne pozycje rozwijane za pomocą .dropdown-item-text
. Zapraszam do dalszego stylu dzięki niestandardowym narzędziom CSS lub tekstowym.
<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>
Aktywny
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>
Wyłączone
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">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
Wyrównanie menu
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.
<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>
Responsywne wyrównanie
Jeśli chcesz użyć elastycznego wyrównania, wyłącz dynamiczne pozycjonowanie, dodając data-display="static"
atrybut i użyj elastycznych klas odmian.
Aby wyrównać menu rozwijane w prawo.dropdown-menu{-sm|-md|-lg|-xl}-right
do danego punktu przerwania lub większego, dodaj .
<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>
Aby wyrównać lewe menu rozwijane do danego punktu przerwania lub większego, dodaj .dropdown-menu-right
i .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>
Zauważ, że nie musisz dodawać data-display="static"
atrybutu do przycisków rozwijanych w paskach nawigacyjnych, ponieważ Popper nie jest używany w paskach nawigacyjnych.
Zawartość menu
Nagłówki
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>
Dzielniki
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>
Tekst
Umieść dowolny tekst w dowolnym formacie w rozwijanym menu z tekstem i użyj narzędzi do ustawiania odstępów . Pamiętaj, że prawdopodobnie będziesz potrzebować dodatkowych stylów zmiany rozmiaru, aby ograniczyć szerokość menu.
<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>
Formularze
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-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>
Opcje rozwijane
Użyj data-offset
lub data-reference
, aby zmienić lokalizację listy rozwijanej.
<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>
Stosowanie
Za pomocą atrybutów danych lub kodu JavaScript rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .show
klasę na elemencie nadrzędnym .dropdown-menu
. Atrybut jest data-toggle="dropdown"
wykorzystywany do zamykania menu rozwijanych na poziomie aplikacji, więc dobrze jest go zawsze używać.
$.noop
)
mouseover
procedury obsługi do bezpośrednich elementów
<body>
podrzędnych elementu. Ten wprawdzie brzydki hack jest niezbędny, aby obejść
dziwactwo w delegowaniu zdarzeń systemu 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.
Poprzez atrybuty danych
Dodaj data-toggle="dropdown"
do linku lub przycisku, aby przełączyć listę rozwijaną.
<div class="dropdown">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu">
...
</div>
</div>
Przez JavaScript
Wywołaj listy rozwijane za pomocą JavaScript:
$('.dropdown-toggle').dropdown()
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
Opcje można przekazywać za pomocą atrybutów danych lub kodu 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. Gdy funkcja jest używana do określenia przesunięcia, jest wywoływana z obiektem zawierającym dane przesunięcia jako pierwszym argumentem. Funkcja musi zwrócić obiekt o tej samej strukturze. Węzeł DOM elementu wyzwalającego jest przekazywany jako drugi argument. Więcej informacji można znaleźć w dokumentacji offsetowej Poppera . |
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ą Poppera . |
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 Poppera . |
odniesienie | ciąg | element | 'przełącznik' | Element referencyjny menu rozwijanego. Akceptuje wartości 'toggle' , 'parent' lub odwołania HTMLElement. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją referenceObject Poppera . |
wyświetlacz | strunowy | 'dynamiczny' | Domyślnie używamy Poppera do dynamicznego pozycjonowania. Wyłącz to za pomocą static . |
popperConfig | zero | obiekt | zero | Aby zmienić domyślną konfigurację Poppera Bootstrapa, zobacz Konfiguracja Poppera |
Zwróć uwagę, że gdy boundary
jest ustawiona na dowolną wartość inną niż 'scrollParent'
, styl position: static
jest stosowany do .dropdown
kontenera.
Metody
metoda | Opis |
---|---|
$().dropdown('toggle') |
Przełącza menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach. |
$().dropdown('show') |
Wyświetla menu rozwijane danego paska nawigacyjnego lub nawigacji na kartach. |
$().dropdown('hide') |
Ukrywa menu rozwijane danego paska nawigacyjnego lub nawigacji w kartach. |
$().dropdown('update') |
Aktualizuje pozycję listy rozwijanej elementu. |
$().dropdown('dispose') |
Niszczy listę rozwijaną elementu. |
Wydarzenia
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. hide.bs.dropdown
a hidden.bs.dropdown
zdarzenia mają clickEvent
właściwość (tylko wtedy, gdy pierwotny typ zdarzenia to click
), która zawiera obiekt zdarzenia dla zdarzenia kliknięcia.
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ć). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something...
})