Sprawdź najnowszą wersję komponentu button group zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.
We wpisie o przyciskach poznaliście ich rodzaje, kolory i rozmiary. Kolejnym elementem dotyczącym przycisków jaki opiszę jest ich grupowanie. Polega ono na „złączenie” kilku przycisków w jeden element ale zachowując możliwość kliknięcia w każdy z nich oddzielnie. Ten element znajduje zastosowanie między innymi w sytuacji gdy mamy kilka sekcji i każda z nich posiada jakieś przyciski. Wtedy można je fajnie pogrupować co od razu sugeruje użytkownikowi, że przyciśnięcie każdego z nich będzie modyfikowało tą a nie inną sekcję.
Podstawowy przykład
Podobnie jak w przypadku tworzenia grup checkboxów/radio jako buttonów najpierw musimy stworzyć „wrapper” czyli div, który będzie otaczał przyciski. Temu divowi musimy nadać klasę .btn-group oraz atrybut role=group. W jego wnętrzu tworzymy sobie klasyczne buttony. Mogą one, ale nie muszą, mieć ten sam kolor.
Przykład
Kod
<div class="btn-group">
<button class="btn btn-secondary" type="button">Lewy</button>
<button class="btn btn-secondary" type="button">Środkowy</button>
<button class="btn btn-secondary" type="button">Prawy</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" type="button">Lewy</button>
<button class="btn btn-success" type="button">Środkowy 1</button>
<button class="btn btn-warning" type="button">Środkowy 2</button>
<button class="btn btn-danger" type="button">Prawy</button>
</div>Pasek narzędzi
Kolejnym przykładem zastosowania grup przycisków jest zbudowanie „paska narzędzi”. Możemy w ten sposób stworzyć grupę grup przycisków i podpiąć do nich różne akcje. W przyciskach możemy umieszczać tekst ale możemy skorzystać również z gotowych ikon jak na przykład „Font Awesome”.
Taki pasek narzędzi tworzymy poprzez stworzenie „wrappera” z klasą .btn-toolbar i atrybutem role=toolbar. W jego wnętrzu umieszczamy natomiast opisane wyżej grupy buttonów. Aby nasze grupy były od siebie oddalone, każdej z nich dodamy klasę .mr-2 (mr – od margin-right ).
Przykład
Kod
<div class="btn-toolbar" role="toolbar" aria-label="Pasek narzędzi">
<div class="btn-group mr-2" role="group" aria-label="Pierwsza grupa">
<button type="button" class="btn btn-secondary"><i class="fa fa-file-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary"><i class="fa fa-folder-open-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary"><i class="fa fa-print" aria-hidden="true"></i></button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Druga grupa">
<button type="button" class="btn btn-secondary">Wstaw</button>
<button type="button" class="btn btn-secondary">Format</button>
<button type="button" class="btn btn-secondary">Narzędzia</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Trzecia grupa">
<button type="button" class="btn btn-success"><i class="fa fa-floppy-o fa-lg"></i> Zapisz</button>
<button type="button" class="btn btn-danger"><i class="fa fa-trash-o fa-lg"></i> Usuń</button>
</div>
</div>Rozmiary przycisków
Podobnie jak ze zwykłymi buttonami, możemy zmienić również rozmiar całej ich grupy. Różnica polega na tym, że zamiast nadawać rozmiar przyciskowi to dodajemy odpowiednią klasę całej grupie czyli naszemu wrapperowi z klasą .btn-group. Aby uzyskać większy rozmiar korzystamy z klasy .btn-group-lg, dla mniejszych przycisków zastosujemy klasę .btn-group-sm.
Przykład
Kod
<div class="btn-group-lg" role="group" aria-label="Większe przyciski">
<button type="button" class="btn btn-secondary">Lewy</button>
<button type="button" class="btn btn-secondary">Środkowy</button>
<button type="button" class="btn btn-secondary">Prawy</button>
</div>
<div class="btn-group" role="group" aria-label="Normalne przyciski">
<button type="button" class="btn btn-secondary">Lewy</button>
<button type="button" class="btn btn-secondary">Środkowy</button>
<button type="button" class="btn btn-secondary">Prawy</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Małe przyciski">
<button type="button" class="btn btn-secondary">Lewy</button>
<button type="button" class="btn btn-secondary">Środkowy</button>
<button type="button" class="btn btn-secondary">Prawy</button>
</div>Buttony z rozwijaną listą
Twórcy Bootstrapa przygotowali element, który jest czymś w rodzaju rozwijanej listy opcji, która pojawia się po kliknięciu w przycisk. Element ten możemy użyć również w przypadku grupy przycisków. W tym celu najpierw tworzymy standardową grupę przycisków czyli div z klasą .btn-group i umieszczamy wewnątrz buttony. Aby stworzyć button z rozwijaną listą, muskmy wewnątrz naszego wrappera zagnieździć kolejną grupę przycisków czyli kolejnego diva z klasą .btn-group. W jego wnętrzu najpierw umieszczamy zwykły button z dodatkową klasą .dropdown-toggle oraz atrybutem data-toggle="dropdown" a następnie naszą rozwijaną listę. Listę tą tworzymy poprzez stworzenie wrappera otaczającego elementy listy czyli diva z klasą .dropdown-menu a w jego wnętrzu linki z klasą .dropdown-item.
Przykład
Kod
<div class="btn-group" role="group" aria-label="Grupa przycisków z rozwijaną listą">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnDropdown" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rozwijana lista
</button>
<div class="dropdown-menu" aria-labelledby="btnDropdown">
<a class="dropdown-item" href="#">Element listy</a>
<a class="dropdown-item" href="#">Element listy</a>
</div>
</div>
</div>Pionowa grupa przycisków
Grupa przycisków nie musi być tylko pozioma. Jeśli nasz layout wymaga tego by buttony układały się pod sobą, to nie ma z tym problemu:) Aby uzyskać pionowy układ nasz wrapper musi mieć klasę .btn-group-vertical. W pionowej liście również możecie umieszczać rozwijane listy.
Przykład
Kod
<div class="btn-group-vertical" role="group" aria-label="Grupa przycisków z rozwijaną listą">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnDropdown" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rozwijana lista
</button>
<div class="dropdown-menu" aria-labelledby="btnDropdown">
<a class="dropdown-item" href="#">Element listy</a>
<a class="dropdown-item" href="#">Element listy</a>
</div>
</div>
<button type="button" class="btn btn-success">3</button>
<button type="button" class="btn btn-danger">4</button>
</div>
Loading...
2 komentarzy w “Grupy przycisków / Button group”
Robert
jak podpiac pod button akce np przejscie do innej strony?
Robert
jak podpiac pob button konkretna akcje np przejscie do innej strony?