Radio i checkbox jako button

11 363 0

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


Standardowe elementy checkbox i radio nie są zbyt atrakcyjne wizualnie. Oczywiście istnieje wiele bibliotek, które zmieniają ich wygląd, dodają animacje podczas kliknięcia itp. Ale tutaj skupiamy się na samym Bootstrapie, więc zajmiemy się elementem przygotowanym przez jego twórców a mianowicie checkboxem lub radio wyglądającym jak bootstrapowy przycisk a właściwie grupa przycisków.

Checkbox jako button

Zaczniemy od grupy buttonów, które są checkboxami. Naszym „wrapperem” czyli elementem skupiającym będzie div z klasą .btn-group .btn-group-toggle oraz atrybutem data-toggle="buttons". Wewnątrz umieszczamy najpierw element <label> z klasami .btn oraz .btn-*. Kolory a właściwie klasy buttonów opisane są w tym wpisie. Natomiast wewnątrz powyższego elementu umieszczamy sam checkbox czyli <input type="checkbox" autocomplete="off"> Nazwa opcji. Gdy chcemy by był on domyślnie zaznaczony musimy dodać mu atrybut checked. Label w połączeniu z input kopiujemy tyle razy ile checkboxów chcemy mieć. Całość wygląda następująco:

Przykład

Kod

</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (domyślnie zaznaczony)
  </label>
  <label class="btn btn-success">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-warning">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Checkbox 4
  </label>
</div>
<p>

Radio jako button

Elementy radio tworzymy analogicznie do elementów checkbox. Różnica polega na zamianie typu input na radio.

Przykład

Kod

</p>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (domyślnie zaznaczony)
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-warning">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
  </label>
</div>
<p>

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

Chcesz coś napisać?

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

*

*