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

Menu rozwijane z jednym przyciskiem

Każdy singiel .btnmoż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:

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

Podziel rozwijane przyciski

Podobnie, utwórz listy rozwijane z podzielonymi 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>

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

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

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

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>

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

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>

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, dlatego warto zawsze go 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 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 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 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 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.

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

Menu rozwijane z jednym przyciskiem

Podziel rozwijane przyciski

Rozmiary

Odmiana dropup

Odmiana Dropright

Odmiana Dropleft

Elementy menu

Wyrównanie menu

Nagłówki menu

Dzielniki menu

Formularze menu

Aktywne pozycje menu

Wyłączone pozycje menu

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

`data-toggle="dropdown"`nadal wymagane

Opcje

Metody

Wydarzenia

Menu rozwijane

Przegląd

Dostępność

Przykłady

Menu rozwijane z jednym przyciskiem

Podziel rozwijane przyciski

Rozmiary

Odmiana dropup

Odmiana Dropright

Odmiana Dropleft

Elementy menu

Wyrównanie menu

Nagłówki menu

Nagłówek rozwijany

Dzielniki menu

Formularze menu

Aktywne pozycje menu

Wyłączone pozycje menu

Stosowanie

Poprzez atrybuty danych

Przez JavaScript

data-toggle="dropdown"nadal wymagane

Opcje

Metody

Wydarzenia

`data-toggle="dropdown"`nadal wymagane