Button
I pulsanti sono componenti fondamentali che consentono all'utente di attivare un un'azione. Esistono cinque tipi di pulsanti. Nella tabella seguente vengono descritti i l'aspetto di ciascuno dei cinque tipi di pulsanti, oltre alla posizione in cui dovresti utilizzare che li rappresentano.
Tipo |
Aspetto |
Finalità |
---|---|---|
Pieno |
Sfondo in tinta unita con testo in contrasto. |
Pulsanti con enfasi elevata. Si tratta delle azioni principali in un'applicazione, ad esempio "invia" e "Salva". L'effetto ombra mette in risalto l'importanza del pulsante. |
Tonalità riempita |
Il colore dello sfondo varia in base alla superficie. |
Anche per le azioni principali o significative. I pulsanti pieni offrono maggiore peso visivo e si adattano a funzioni come "aggiungi al carrello" e "Accedi". |
Alta |
Si distingue perché ha un'ombra. |
Funziona in modo simile ai pulsanti tonali. Aumenta l'elevazione per rendere il pulsante ancora più visibile. |
Con contorno |
Presenta un bordo senza riempimento. |
Pulsanti con enfasi media, contenenti azioni importanti ma non principali. Si accoppiano bene con altri pulsanti per indicare azioni secondarie alternative come "Annulla" o "Indietro". |
Testo |
Visualizza il testo senza sfondo o bordo. |
Pulsanti a bassa enfasi, ideali per azioni meno critiche come link di navigazione o funzioni secondarie come "Scopri di più" o "Visualizza dettagli". |
L'immagine seguente mostra i cinque tipi di pulsanti in Material Design.
Piattaforma API
onClick
: la funzione chiamata quando l'utente preme il pulsante.enabled
: se falso, questo parametro fa sì che il pulsante venga visualizzato non disponibili e inattivi.colors
: un'istanza diButtonColors
che determina i colori utilizzati in il pulsante.contentPadding
: la spaziatura interna all'interno del pulsante.
Pulsante pieno
Il componente pulsante riempito utilizza l'elemento componibile Button
di base. È
riempita con un colore a tinta unita per impostazione predefinita. Il seguente snippet illustra come
implementare il componente:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante pieno con uno sfondo viola che indica "riempito".](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=9&hl=it)
Pulsante tonale pieno
Il componente pulsante tonale pieno utilizza il componibile FilledTonalButton
.
Viene riempita con un colore tonale per impostazione predefinita.
Il seguente snippet illustra come implementare il componente:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante tonale con uno sfondo viola chiaro che indica "pieno".](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=9&hl=it)
Pulsante con contorni
Il componente pulsante delineato utilizza il componibile OutlinedButton
. it
appare con una struttura per impostazione predefinita.
Il seguente snippet illustra come implementare il componente:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante trasparente con contorno scuro e con la scritta "Contorno".](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=9&hl=it)
Pulsante in rilievo
Il componente del pulsante con privilegi elevati utilizza il componibile ElevatedButton
. Ha
un'ombra che rappresenta l'effetto di elevazione per impostazione predefinita. Tieni presente che
essenzialmente un pulsante con contorni ombra.
Il seguente snippet illustra come implementare il componente:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante in alto con uno sfondo grigio con la scritta "Elevata".](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=9&hl=it)
Pulsante Testo
Il componente del pulsante di testo utilizza il componibile TextButton
. Fino a quando non premi,
e appare solo come testo. Per impostazione predefinita, non presenta un riempimento o un contorno in tinta unita.
Il seguente snippet illustra come implementare il componente:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Questa implementazione si presenta nel seguente modo:
![Un pulsante di testo con la dicitura "Pulsante di testo"](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=9&hl=it)