Pulsanti con icone in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Occhiali con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, un IconButton è un componente interattivo compatto utilizzato per esporre azioni supplementari con un singolo tocco.

I pulsanti con icone appaiono più piccoli dei pulsanti standard, ma mantengono un bordo fisico per garantire la facilità di interazione sugli occhiali con display.

Per altri casi d'uso, sono disponibili anche pulsanti standard e pulsanti di attivazione/disattivazione.

Un esempio di alcuni stili diversi di pulsanti con icone in Jetpack Compose Glimmer. Questi esempi mostrano cinque stati dei pulsanti con icone: Attivato (1), Con stato attivo (2), Premuto (3), Disattivato (4), Disattivato e con stato attivo (5).

Dimensioni

Elemento Dimensione

Dimensioni minime del contenitore

48 x 48 dp

Dimensioni dell'icona interna

32 x 32 dp

Spaziatura interna predefinita dei contenuti

GlimmerTheme.componentSpacingValues.small

Stati

I pulsanti con icone in Jetpack Compose Glimmer cambiano aspetto per comunicare il loro stato.

  • Attivato: lo stato interattivo predefinito.
  • Con stato attivo: applica GlimmerTheme.depthEffectLevels.level1 e un bordo con stato attivo.
  • Premuto: applica una sovrapposizione bianca semitrasparente alla superficie.
  • Disattivato: il pulsante non è interattivo e il feedback visivo viene rimosso.

Valori predefiniti dei pulsanti con icone

I seguenti valori predefiniti si applicano ai pulsanti con icone:

  • Forma: il valore predefinito è GlimmerTheme.shapes.large (in genere circolare).
  • Colore: il valore predefinito è GlimmerTheme.colors.surface.
  • Colore dei contenuti: calcolato automaticamente dal colore di sfondo, a meno che non venga fornito esplicitamente.
  • Spaziatura interna dei contenuti: fornisce la spaziatura predefinita tra l'icona e il bordo del contenitore.
  • Dimensioni minime: un valore fisso 48.dp per evitare che i pulsanti diventino troppo piccoli per l'interazione.
  • Dimensioni dell'icona: il valore predefinito è GlimmerTheme.iconSizes.small (32.dp).

Esempio: pulsante con icona

Il seguente codice crea un pulsante con icona con le caratteristiche predefinite:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}