menuMDUIDocs
color_lens
Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Seçim Kontrolleri

Seçim kontrolleri onay kutularını, radyo butonlarını ve anahtarları içerir.

Kullanım

Seçim kontrolleri saf CSS ile yazılmıştır ve etkinleşmesi için yalnızca HTML kodu yazılması gerekir.

Renkler

Vurgu rengini kullanın.

Stil

Onay Kutusu

Örnek
<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  Varsayılan olarak seçili değil
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  Varsayılan olarak seçili
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  Devre dışı ve seçili değil
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  Devre dışı ve seçili
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  Belirsiz durum
</label>
<script>
  // indeterminate özniteliği yalnızca JavaScript ile ayarlanabilir
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  Devre dışı ve belirsiz durum
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

Radyo Butonu

Örnek
<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    Varsayılan olarak seçili değil
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    Varsayılan olarak seçili
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    Devre dışı ve seçili değil
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    Devre dışı ve seçili
  </label>
</form>

Anahtar

Örnek
<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 Sınıf Listesi

Sınıf AdıAçıklama
.mdui-checkboxBir onay kutusu tanımlayın.
.mdui-checkbox-iconOnay kutusunun içindeki simgeyi tanımlayın.
.mdui-radioBir radyo butonu tanımlayın.
.mdui-radio-iconRadyo butonunun içindeki simgeyi tanımlayın.
.mdui-switchBir anahtar tanımlayın.
.mdui-switch-iconAnahtarın içindeki simgeyi tanımlayın.