Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Kontrolki wyboru

Kontrolki wyboru obejmują checkboxy, przyciski radiowe i przełączniki.

Sposób użycia

Kontrolki wyboru są napisane w czystym CSS, wystarczy napisać kod HTML, aby zaczęły działać.

Kolory

Używa koloru akcentu.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Kontrolki wyboru

Styl

Checkbox

Przykład

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Domyślnie nieodznaczone
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Domyślnie odznaczone
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Wyłączone i nieodznaczone
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Wyłączone i odznaczone
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Stan nieokreślony
</label>
<script>
  // Atrybut indeterminate może być ustawiony tylko za pomocą JavaScript
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  Wyłączone i stan nieokreślony
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Przycisk radiowy

Przykład

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Domyślnie nieodznaczone
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Domyślnie odznaczone
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Wyłączone i nieodznaczone
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Wyłączone i odznaczone
  </label>
</form>

Przełącznik

Przykład

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

Lista klas CSS

Nazwa klasy	Opis
`.mdui-checkbox`	Definiuje checkbox.
`.mdui-checkbox-icon`	Definiuje ikonę wewnątrz checkboxa.
`.mdui-radio`	Definiuje przycisk radiowy.
`.mdui-radio-icon`	Definiuje ikonę wewnątrz przycisku radiowego.
`.mdui-switch`	Definiuje przełącznik.
`.mdui-switch-icon`	Definiuje ikonę wewnątrz przełącznika.

Pole tekstowe

Suwak