menuMDUIDocs
color_lens
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.

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évLeírás
.mdui-checkboxJelölőnégyzet meghatározása.
.mdui-checkbox-iconA jelölőnégyzeten belüli ikon meghatározása.
.mdui-radioRádiógomb meghatározása.
.mdui-radio-iconA rádiógombon belüli ikon meghatározása.
.mdui-switchKapcsoló meghatározása.
.mdui-switch-iconA kapcsolón belüli ikon meghatározása.