Button
Lo stile del pulsante può essere utilizzato sugli elementi <a>, <button> o <input>.
Le lettere inglesi nei pulsanti verranno trasformate in maiuscolo.
Modalità d'uso
Il componente pulsante è scritto in puro CSS e funziona semplicemente scrivendo il codice HTML.
Letture correlate
Stile
Pulsante piatto
Agli elementi <a>, <button> o <input> aggiungendo la classe .mdui-btn, è possibile ottenere lo stile di un pulsante piatto.
<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>Pulsante fluttuante
L'aggiunta della classe .mdui-btn-raised a un pulsante piatto conferisce al pulsante un effetto fluttuante.
<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>Pulsante icona
L'aggiunta della classe .mdui-btn-icon a un pulsante piatto lo trasforma in un pulsante icona.
<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>Pulsante denso
I pulsanti densi sono leggermente più piccoli dei pulsanti normali e sono adatti per scenari in cui il mouse e la tastiera sono le modalità di input principali. Basta aggiungere la classe .mdui-btn-dense a un pulsante normale.
<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>Elemento a livello di blocco
Aggiungendo la classe .mdui-btn-block a un pulsante, è possibile estenderlo al 100% della larghezza dell'elemento padre e il pulsante diventa un elemento a livello di blocco (block).
<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>Gruppo di pulsanti
Posizionando più pulsanti all'interno di un contenitore di gruppi di pulsanti .mdui-btn-group, diventano un gruppo di pulsanti. L'aggiunta della classe .mdui-btn-active a un pulsante indica che il pulsante è selezionato.
<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>Elenco classi CSS
| Nome classe | Descrizione |
|---|---|
.mdui-btn | Definisce un pulsante |
.mdui-btn-raised | Definisce un pulsante fluttuante |
.mdui-btn-icon | Definisce un pulsante icona |
.mdui-btn-block | Imposta il pulsante come elemento a livello di blocco |
.mdui-btn-group | Contenitore per un gruppo di pulsanti |
.mdui-btn-active | Il pulsante nel gruppo di pulsanti è selezionato |