A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Választó vezérlők

A választóvezérlők közé tartoznak a jelölőnégyzetek, a rádiógombok és a kapcsolók.

Használat

A választóvezérlők tisztán CSS-sel készültek, a használatukhoz elegendő a HTML kód megírása.

Színek

A kiemelő színt használja.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Választóvezérlők

Stílus

Jelölőnégyzet

Példa

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Alapértelmezés szerint nincs bejelölve
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Alapértelmezés szerint bejelölve
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Letiltva és nincs bejelölve
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Letiltva és bejelölve
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Határozatlan állapot
</label>
<script>
  // Az indeterminate (határozatlan) tulajdonság csak JavaScript-tel állítható be
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  Letiltva és határozatlan állapot
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Rádiógomb

Példa

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Alapértelmezés szerint nincs bejelölve
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Alapértelmezés szerint bejelölve
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Letiltva és nincs bejelölve
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Letiltva és bejelölve
  </label>
</form>

Kapcsoló

Példa

<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>

CSS osztályok listája

Osztálynév	Leírás
`.mdui-checkbox`	Jelölőnégyzet meghatározása.
`.mdui-checkbox-icon`	A jelölőnégyzeten belüli ikon meghatározása.
`.mdui-radio`	Rádiógomb meghatározása.
`.mdui-radio-icon`	A rádiógombon belüli ikon meghatározása.
`.mdui-switch`	Kapcsoló meghatározása.
`.mdui-switch-icon`	A kapcsolón belüli ikon meghatározása.

Szövegmező

Csúszka