Listy rozwijane / Dropdowns

4 680 0

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.

Kod

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

Kod

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

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.

Kod

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.

Kod

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

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

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

Wyłączenie elementu listy

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

Przykład

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (15 głosów, średnia: 4,60 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*