Pulsante

parole chiave: AiAssisted, product:JetpackCompose

I pulsanti sono componenti fondamentali che consentono all'utente di attivare un'azione definita. Esistono cinque tipi di pulsanti. Questa tabella descrive l'aspetto di ciascuno dei cinque tipi di pulsanti, nonché dove dovresti utilizzarli:

Tipo Aspetto Finalità
Compilato Sfondo uniforme con testo a contrasto. Pulsanti con enfasi elevata. Questi sono per le azioni principali in un'applicazione, ad esempio "Invia" e "Salva". L'effetto ombra evidenzia l'importanza del pulsante.
Tonale pieno Il colore dello sfondo varia in base alla superficie. Anche per azioni principali o significative. I pulsanti tonali riempiti hanno un peso visivo maggiore e sono adatti a funzioni come "Aggiungi al carrello" e "Accedi".
Elevata Si distingue per la presenza di un'ombra. Svolge una funzione simile a quella dei pulsanti tonali. Aumenta l'elevazione per far apparire il pulsante ancora più in evidenza.
Con contorno Presenta un bordo senza riempimento. Pulsanti con enfasi media, contenenti azioni importanti ma non principali. Si abbinano bene ad altri pulsanti per indicare azioni secondarie alternative, come "Annulla" o "Indietro".
Testo Mostra 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".

Questa immagine mostra i cinque tipi di pulsanti in Material Design:

Un esempio di ciascuno dei cinque componenti pulsante, con le relative caratteristiche uniche evidenziate.
Figura 1. I cinque componenti pulsante.

Superficie API

onClick
La funzione chiamata dal sistema quando l'utente preme il pulsante.
enabled
Quando false, questo parametro fa sì che il pulsante appaia non disponibile e inattivo.
colors
Un'istanza di ButtonColors che determina i colori utilizzati nel pulsante.
contentPadding
Il padding all'interno del pulsante.

Pulsante con riempimento

Il componente pulsante con riempimento utilizza il composable di base Button. Per impostazione predefinita, è riempito con un colore a tinta unita. Lo snippet mostra come implementare il componente:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Questa implementazione viene visualizzata come mostrato di seguito:

Un pulsante con riempimento con sfondo viola con la scritta "Con riempimento".
Figura 2. Un pulsante con riempimento.

Pulsante tonale con riempimento

Il componente pulsante tonale con riempimento utilizza il composable FilledTonalButton. Per impostazione predefinita, è riempito con un colore tonale.

Lo snippet mostra come implementare il componente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Questa implementazione viene visualizzata come mostrato di seguito:

Un pulsante tonale con sfondo viola chiaro con la scritta "Tonale".
Figura 3. Un pulsante tonale.

Pulsante con contorni

Il componente pulsante contorno utilizza il composable OutlinedButton. Per impostazione predefinita, viene visualizzato con un contorno.

Lo snippet mostra come implementare il componente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Questa implementazione viene visualizzata come mostrato di seguito:

Un pulsante trasparente con contorni e un bordo scuro con la scritta "Contorni".
Figura 4. Un pulsante con contorni.

Pulsante sollevato

Il componente Pulsante rialzato utilizza il composable ElevatedButton. Per impostazione predefinita, ha un'ombra che rappresenta l'effetto di elevazione. È un pulsante con riempimento che include un'ombra.

Lo snippet mostra come implementare il componente:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Questa implementazione viene visualizzata come mostrato di seguito:

Un pulsante sollevato con sfondo grigio con la scritta "Sollevato".
Figura 5. Un pulsante sollevato.

Pulsante di testo

Il componente pulsante di testo utilizza il composable TextButton. Viene visualizzato solo testo finché non viene premuto. Per impostazione predefinita, non ha un riempimento o un contorno pieno.

Lo snippet mostra come implementare il componente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Questa implementazione viene visualizzata come mostrato di seguito:

Un pulsante di testo con la dicitura "Pulsante di testo"
Figura 6. Un pulsante di testo.

Risorse aggiuntive