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.

İlgili Okumalar

Material Design yönergeleri: Bileşenler - Seçim kontrolleri

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-checkbox`	Bir onay kutusu tanımlayın.
`.mdui-checkbox-icon`	Onay kutusunun içindeki simgeyi tanımlayın.
`.mdui-radio`	Bir radyo butonu tanımlayın.
`.mdui-radio-icon`	Radyo butonunun içindeki simgeyi tanımlayın.
`.mdui-switch`	Bir anahtar tanımlayın.
`.mdui-switch-icon`	Anahtarın içindeki simgeyi tanımlayın.

Metin Alanı

Kaydırıcı