Button
Button-Stile können auf <a>-, <button>- oder <input>-Elementen verwendet werden.
Die Buchstaben in Button-Beschriftungen werden in Großbuchstaben angezeigt.
Verwendung
Die Button-Komponente ist rein mit CSS umgesetzt; es reicht aus, den HTML-Code zu schreiben, damit sie funktioniert.
Verwandte Themen
Stil
Flacher Button
Fügen Sie die Klasse .mdui-btn zu <a>-, <button>- oder <input>-Elementen hinzu, um den Stil eines flachen Buttons zu erhalten.
<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>Erhöhter Button
Das Hinzufügen der Klasse .mdui-btn-raised zu einem flachen Button verleiht ihm einen erhöhten Effekt.
<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>Icon-Button
Das Hinzufügen der Klasse .mdui-btn-icon zu einem flachen Button macht ihn zu einem Icon-Button.
<button class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>Kompakter Button
Kompakte Buttons sind etwas kleiner als normale Buttons und eignen sich besonders für Szenarien, in denen Maus und Tastatur die primären Eingabemethoden sind. Fügen Sie einfach die Klasse .mdui-btn-dense zu einem normalen Button hinzu.
<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button><button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
<i class="mdui-icon material-icons">add</i>
</button>Block-Level-Element
Fügen Sie die Klasse .mdui-btn-block zu einem Button hinzu, damit er sich über 100 % der Breite des Elternelements erstreckt und so zu einem Block-Level-Element wird.
<div class="mdui-row-xs-2">
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
<div class="mdui-col">
<button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
</div>
</div>Button-Gruppe
Das Platzieren mehrerer Buttons in einem .mdui-btn-group-Container erstellt eine Button-Gruppe. Das Hinzufügen der Klasse .mdui-btn-active zu einem Button zeigt an, dass dieser ausgewählt ist.
<div class="mdui-btn-group">
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_left</i>
</button>
<button type="button" class="mdui-btn mdui-btn-active">
<i class="mdui-icon material-icons">format_align_center</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_right</i>
</button>
<button type="button" class="mdui-btn">
<i class="mdui-icon material-icons">format_align_justify</i>
</button>
</div>CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-btn | Definieren Sie einen Button. |
.mdui-btn-raised | Definieren Sie einen erhöhten Button. |
.mdui-btn-icon | Definieren Sie einen Icon-Button. |
.mdui-btn-block | Setzen Sie den Button auf ein Block-Level-Element. |
.mdui-btn-group | Container für Button-Gruppe. |
.mdui-btn-active | Der Button in der Button-Gruppe ist ausgewählt. |