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 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.jsktó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 .

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 rolei 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-itemelementach 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 .btnmoż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" 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">
  <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:

<!-- 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>

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-splitodpowiedniego odstępu wokół karetki rozwijanej.

Używamy tej dodatkowej klasy, aby zmniejszyć poziom paddingpo obu stronach karetki o 25% i usunąć margin-lefttę 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-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>

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-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>

Wskazówki

Dropup

Wyzwalaj menu rozwijane nad elementami, dodając .dropupje 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-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

Uruchom menu rozwijane po prawej stronie elementów, dodając .droprightje 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-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>

Dropleft

Wyzwalaj menu rozwijane po lewej stronie elementów, dodając .dropleftje 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-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>

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>

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 .activedo 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 .disableddo 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>

Domyślnie menu rozwijane jest automatycznie umieszczane w 100% od góry i wzdłuż lewej strony swojego rodzica. Dodaj .dropdown-menu-rightdo .dropdown-menuprawej 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>

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-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>

Użyj data-offsetlub 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" 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>

Stosowanie

Poprzez atrybuty danych lub JavaScript, rozwijana wtyczka przełącza ukrytą zawartość (menu rozwijane), przełączając .showklasę w elemencie listy nadrzędnej. Atrybut jest data-toggle="dropdown"wykorzystywany do zamykania menu rozwijanych na poziomie aplikacji, więc dobrze jest go zawsze używać.

Na urządzeniach z obsługą dotykową otwarcie listy rozwijanej dodaje puste ( $.noop) mouseoverprocedury 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 mouseovermoduł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 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>

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. 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. Więcej informacji można znaleźć w dokumentacji 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 .
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 Popper.js .
wyświetlacz	strunowy	'dynamiczny'	Domyślnie używamy Popper.js do dynamicznego pozycjonowania. Wyłącz to za pomocą `static`.

Zwróć uwagę, że gdy boundaryjest ustawiona na dowolną wartość inną niż 'scrollParent', styl position: staticjest stosowany do .dropdownkontenera.

Metody

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.

Wydarzenia

Wszystkie zdarzenia rozwijane są uruchamiane w .dropdown-menuelemencie nadrzędnym i mają relatedTargetwłaściwość, której wartością jest przełączający element zakotwiczenia. hide.bs.dropdowna hidden.bs.dropdownzdarzenia mają clickEventwł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…
})

Menu rozwijane

Przegląd

Dostępność

Przykłady

Pojedynczy przycisk

Przycisk podziału

Rozmiary

Wskazówki

Dropup

Dropright

Dropleft

Elementy menu

Aktywny

Wyłączone

Wyrównanie menu

Zawartość menu

Nagłówki

Dzielniki

Tekst

Formularze

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

`data-toggle="dropdown"`nadal wymagane

Opcje

Metody

Wydarzenia

Menu rozwijane

Przegląd

Dostępność

Przykłady

Pojedynczy przycisk

Przycisk podziału

Rozmiary

Wskazówki

Dropup

Dropright

Dropleft

Elementy menu

Aktywny

Wyłączone

Wyrównanie menu

Zawartość menu

Nagłówki

Nagłówek rozwijany

Dzielniki

Tekst

Formularze

Opcje rozwijane

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

data-toggle="dropdown"nadal wymagane

Opcje

Metody

Wydarzenia

`data-toggle="dropdown"`nadal wymagane