near_me
Začínáme
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zdroje
keyboard_arrow_downZcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.
Ovládací prvky výběru
Ovládací prvky výběru zahrnují zaškrtávací políčka, přepínače a spínače.
Způsob volání
Ovládací prvky výběru jsou napsány v čistém CSS a fungují pouze s HTML kódem.
Barvy
Používejte barvu důrazu.
Související čtení
Designové zásady Material Design: Komponenty - Ovládací prvky výběru
Příklad
<label class="mdui-checkbox">
<input type="checkbox"/>
<i class="mdui-checkbox-icon"></i>
Ve výchozím nastavení není zaškrtnuto
</label>
<label class="mdui-checkbox">
<input type="checkbox" checked/>
<i class="mdui-checkbox-icon"></i>
Ve výchozím nastavení je zaškrtnuto
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled/>
<i class="mdui-checkbox-icon"></i>
Zakázáno a není zaškrtnuto
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled checked/>
<i class="mdui-checkbox-icon"></i>
Zakázáno a je zaškrtnuto
</label>
<label class="mdui-checkbox">
<input type="checkbox" id="indeterminate-demo1"/>
<i class="mdui-checkbox-icon"></i>
Neurčitý stav
</label>
<script>
// Vlastnost indeterminate lze nastavit pouze pomocí JavaScriptu.
document.getElementById('indeterminate-demo1').indeterminate = true;
</script>
<label class="mdui-checkbox">
<input type="checkbox" disabled id="indeterminate-demo2"/>
<i class="mdui-checkbox-icon"></i>
Zakázáno a neurčitý stav
</label>
<script>
document.getElementById('indeterminate-demo2').indeterminate = true;
</script>Příklad
<form>
<label class="mdui-radio">
<input type="radio" name="group1"/>
<i class="mdui-radio-icon"></i>
Ve výchozím nastavení není zaškrtnuto
</label>
<label class="mdui-radio">
<input type="radio" name="group1" checked/>
<i class="mdui-radio-icon"></i>
Ve výchozím nastavení je zaškrtnuto
</label>
<label class="mdui-radio">
<input type="radio" name="group1" disabled/>
<i class="mdui-radio-icon"></i>
Zakázáno a není zaškrtnuto
</label>
</form>
<form>
<label class="mdui-radio">
<input type="radio" name="group1" disabled checked/>
<i class="mdui-radio-icon"></i>
Zakázáno a je zaškrtnuto
</label>
</form>Příklad
<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>