near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Auswahl-Steuerelemente
Auswahl-Steuerelemente umfassen Checkboxen, Radio Buttons und Switches.
Verwendung
Auswahl-Steuerelemente sind rein in CSS geschrieben und werden durch das Schreiben von HTML-Code aktiviert.
Farbe
Verwendet die Akzentfarbe.
Beispiel
<label class="mdui-checkbox">
<input type="checkbox"/>
<i class="mdui-checkbox-icon"></i>
Standardmäßig nicht ausgewählt
</label>
<label class="mdui-checkbox">
<input type="checkbox" checked/>
<i class="mdui-checkbox-icon"></i>
Standardmäßig ausgewählt
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled/>
<i class="mdui-checkbox-icon"></i>
Deaktiviert und nicht ausgewählt
</label>
<label class="mdui-checkbox">
<input type="checkbox" disabled checked/>
<i class="mdui-checkbox-icon"></i>
Deaktiviert und ausgewählt
</label>
<label class="mdui-checkbox">
<input type="checkbox" id="indeterminate-demo1"/>
<i class="mdui-checkbox-icon"></i>
Unbestimmter Zustand
</label>
<script>
// Die Eigenschaft indeterminate kann nur über JavaScript gesetzt werden
document.getElementById('indeterminate-demo1').indeterminate = true;
</script>
<label class="mdui-checkbox">
<input type="checkbox" disabled id="indeterminate-demo2"/>
<i class="mdui-checkbox-icon"></i>
Deaktiviert und unbestimmter Zustand
</label>
<script>
document.getElementById('indeterminate-demo2').indeterminate = true;
</script>Beispiel
<form>
<label class="mdui-radio">
<input type="radio" name="group1"/>
<i class="mdui-radio-icon"></i>
Standardmäßig nicht ausgewählt
</label>
<label class="mdui-radio">
<input type="radio" name="group1" checked/>
<i class="mdui-radio-icon"></i>
Standardmäßig ausgewählt
</label>
<label class="mdui-radio">
<input type="radio" name="group1" disabled/>
<i class="mdui-radio-icon"></i>
Deaktiviert und nicht ausgewählt
</label>
</form>
<form>
<label class="mdui-radio">
<input type="radio" name="group1" disabled checked/>
<i class="mdui-radio-icon"></i>
Deaktiviert und ausgewählt
</label>
</form>Beispiel
<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-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-checkbox | Definiert eine Checkbox. |
.mdui-checkbox-icon | Definiert das Icon innerhalb einer Checkbox. |
.mdui-radio | Definiert einen Radio Button. |
.mdui-radio-icon | Definiert das Icon innerhalb eines Radio Buttons. |
.mdui-switch | Definiert einen Switch. |
.mdui-switch-icon | Definiert das Icon innerhalb eines Switches. |