Listy rozwijane / Dropdowns - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu dropdowns zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Listy rozwijane są elementami, których możemy używać podczas chęci ukrycia jakiś opcji lub linków pod przyciskiem. Wtedy zamiast wypisywać je wszystkie to umieszczamy je jako właśnie taka lista i wyświetlamy ją dopiero po kliknięciu. Listy rozwijane są bardzo często używane w layoutach narzędzi on-line. Gdy któreś z nich oferuje dużą ilość opcji, lepiej jest je pogrupować i „ukryć” pod przyciskiem. Standardowym zastosowaniem jest również rozwijane menu, mamy w nim na przykład link do podstrony „Oferta” ale dzięki rozwijanej liście umożliwiamy użytkownikowi przejście do danego produktu naszej oferty jak na przykład „Tworzenie stron”, „Kreacja graficzna” itp.

Podstawowy przykład

Gdy chcemy utworzyć rozwijaną listę na przykład pod przyciskiem to obowiązkową rzeczą jaką musimy zrobić jest stworzenie diva z klasą .dropdown, lub inną, która posiada właściwość position: relative czyli na przykład .btn-group. Dopiero w nim możemy umieszczać dalszy kod.

Lista w przycisku

Najprostszym przykładem zastosowania rozwijanej listy jest ukrycie jej pod przyciskiem. Zaczynamy od tego o czym pisałem wyżej czyli utworzenia diva z klasą .dropdown. W jego wnętrzu stworzymy sobie button lub element <a>, który musi zawierać dodatkowo klasę .dropdown-toggle oraz atrybut data-toggle="dropdown". Następnie, oczywiście nadal wewnątrz naszego wrappera, tworzymy diva z klasą .dropdown-menu a w jego wnętrzu umieszczamy linki z klasą .dropdown-item, które są elementami naszej listy.

Przykład

Kod

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="przykladowaLista" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaLista">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" type="button" id="przykladowaLista" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </a>
  <div class="dropdown-menu" aria-labelledby="przykladowaLista">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

Oczywiście przyciski mogą mieć różne kolory, które poznacie we wpisie o buttonach.

Przykład

Kod

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" id="przykladowaListaSuccess" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaSuccess">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="przykladowaListaInfo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaInfo">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-warning dropdown-toggle" type="button" id="przykladowaListaWarning" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaWarning">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" id="przykladowaListaDanger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaDanger">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

Lista w rozdzielonym przycisku

Możemy stworzyć przycisk, który część odpowiedzialną za rozwijanie listy ma wizualnie oddzieloną czyli jest właściwie grupą przycisków. Jak pisałem wyżej, nie musimy korzystać z diva z klasą .dropdown, w tym przypadku skorzystamy z klasy .btn-group. Otwieramy sobie zatem diva z klasą .btn-group i umieszczamy w nim dwa buttony. Pierwszy z nich będzie klasycznym przyciskiem z klasami .btn .btn-*. Natomiast drugi z nich, z racji tego, że ma rozwijać listę to prócz klas .btn .btn-* oraz klasy .dropdown-toggle, musi mieć również kolejną klasę .dropdown-toggle-split. Nie zapominamy także o atrybucie data-toggle="dropdown". Ostatnimi elementami są div z klasą .dropdown-menu oraz elementy listy czyli linki z klasą .dropdown-item. Oczywiście możemy korzystać z kolorowych przycisków.

Kod

<div class="btn-group">
  <button type="button" class="btn btn-primary">Kliknij mnie!</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-success">Kliknij mnie!</button>
  <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-info">Kliknij mnie!</button>
  <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-warning">Kliknij mnie!</button>
  <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-danger">Kliknij mnie!</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">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

Rozmiary

Z racji tego, że nasze listy opieramy na przyciskach to prócz ich kolorów, możemy również zmieniać ich rozmiary za pomocą klas .btn-sm oraz .btn-lg. Rozmiary te możemy zastosować zarówno dla przycisków „w całości” jak i tych rozdzielonych.

Przykład

Kod

<div class="dropdown">
  <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-success btn-sm">Kliknij mnie!</button>
  <button type="button" class="btn btn-success btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-warning btn-lg dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-danger btn-lg">Kliknij mnie!</button>
  <button type="button" class="btn btn-danger btn-lg dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

Lista rozwijana w górę

Gdy wasz layout tego wymaga, można stworzyć listę rozwijaną w górę. Jest to bardzo proste, wystarczy wrapperowi czyli divowi z klasą .dropdown lub .btn-group dodać klasę .dropup.

Przykład

Kod

<div class="dropdown dropup">
  <button class="btn btn-warning dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Kliknij mnie!
  </button>
  <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
    <a class="dropdown-item" href="#">Pierwszy element</a>
    <a class="dropdown-item" href="#">Drugi element</a>
    <a class="dropdown-item" href="#">Trzeci element</a>
  </div>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-danger">Kliknij mnie!</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">Rozwiń listę</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Pierwszy link</a>
    <a class="dropdown-item" href="#">Drugi link</a>
    <a class="dropdown-item" href="#">Trzeci link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Czwarty link</a>
  </div>
</div>

Lista po prawej

Domyślnie rozwijana lista jest wyrównana do lewej strony przycisku. Gdy chcemy ją przenieść do prawej, wystarczy divovi z klasą .dropdown-menu dodać kolejną klasę .dropdown-menu-right.

Przykład

Kod

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Menu będzie po prawej stronie
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Pierwsza opcja</button>
        <button class="dropdown-item" type="button">Druga opcja</button>
        <button class="dropdown-item" type="button">Trzecia opcja</button>
    </div>
</div>

Nagłówek listy

Możemy naszej rozwijanej liście dodać jakiś nagłówek, który może ją krótko opisywać. Aby tego dokonać, wewnątrz diva z klasą .dropdown-menu, jako pierwszy element listy tworzymy sobie np. nagłówek <h6> z klasą .dropdown-header.

Przykład

Kod

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Kliknij mnie!
    </button>
    <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
        <h6 class="dropdown-header">Nagłówek listy</h6>
        <a class="dropdown-item" href="#">Pierwszy element</a>
        <a class="dropdown-item" href="#">Drugi element</a>
        <a class="dropdown-item" href="#">Trzeci element</a>
    </div>
</div>

Rozdzielacz / Separator

Elementy naszej listy możemy rozdzielać co pomoże nam w ich organizacji. Wewnątrz diva z klasą .dropdown-menu a pomiędzy elementami z klasą .dropdown-item, które chcemy rozdzielić, należy wstawić pustego diva z klasą .dropdown-divider.

Przykład

Kod

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Kliknij mnie!
    </button>
    <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
        <h6 class="dropdown-header">Nagłówek listy</h6>
        <a class="dropdown-item" href="#">Pierwszy element</a>
        <a class="dropdown-item" href="#">Drugi element</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Trzeci element</a>
    </div>
</div>

Wyłączenie elementu listy

Aby zablokować możliwość kliknięcia w jakiś element listy wystarczy dodać mu dodatkową klasę .disabled

Przykład

Kod

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="przykladowaListaPrimary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Kliknij mnie!
    </button>
    <div class="dropdown-menu" aria-labelledby="przykladowaListaPrimary">
        <h6 class="dropdown-header">Nagłówek listy</h6>
        <a class="dropdown-item" href="#">Pierwszy element</a>
        <a class="dropdown-item disabled" href="#">zablokowany element</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Trzeci element</a>
    </div>
</div>