Boutons dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR →
Lunettes d'affichage
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, un Button est un composant interactif optimisé pour la saisie avec des lunettes d'affichage. Il fournit un retour visuel clair grâce à ses états pour guider les actions de l'utilisateur.

Les boutons sont basés sur le système de surface Jetpack Compose Glimmer, qui gère automatiquement les propriétés physiques telles que les bordures et la profondeur.

Le bouton standard contient un libellé de texte et des icônes facultatives. Vous pouvez l'utiliser pour des actions principales ou secondaires. Il existe également des boutons spécialisés, tels que les boutons d'icône et les boutons bascule, qui sont définis comme des composants distincts dans Jetpack Compose Glimmer.

Par défaut

Exemple de différents styles de boutons dans Jetpack Compose Glimmer. Ces exemples montrent des boutons de taille moyenne par défaut avec trois états : activé (1), sélectionné (2) et appuyé (3).

Grande

Exemple de différents styles de boutons dans Jetpack Compose Glimmer. Ces exemples montrent des boutons de grande taille avec trois états : activé (1), sélectionné (2) et appuyé (3).

Anatomie

Un bouton se compose d'un conteneur et d'un libellé, avec des icônes de début et de fin facultatives.

Partie Description

Conteneur

Surface d'arrière-plan du bouton.

Libellé

Texte décrivant l'action.

Icône (facultatif)

Indicateurs visuels de début ou de fin.

Tailles

Les boutons Jetpack Compose Glimmer sont disponibles en deux tailles. Elles affectent la hauteur minimale et le remplissage interne.

Taille Hauteur minimale Règle d'utilisation par défaut

Moyenne

48 dp

Actions et listes standards (par défaut).

Grande

72 dp

Actions à forte intensité ou points d'entrée principaux de l'écran.

États

Les boutons de Jetpack Compose Glimmer modifient leur apparence pour communiquer leur état.

  • Activé : état par défaut d'un bouton interactif.
  • Sélectionné : lorsqu'il est sélectionné, le bouton applique un GlimmerTheme.depthEffectLevels.level1 et une bordure de sélection.
  • Appuyé : lorsqu'il est activé, une superposition blanche semi-transparente est appliquée à la surface.
  • Désactivé : le bouton ne répond pas à la saisie et son apparence visuelle est ajustée.

Valeurs par défaut des boutons

Les valeurs par défaut suivantes s'appliquent aux boutons standards :

  • Par défaut, les boutons utilisent GlimmerTheme.typography.bodySmall. Assurez-vous que le texte des boutons est concis et décrit clairement l'action.
  • La forme par défaut d'un bouton est GlimmerTheme.shapes.large. Cet arrondi cohérent aide les utilisateurs à identifier les boutons dans l'interface des lunettes d'affichage.

Exemple : bouton avec texte

Le code suivant crée un bouton standard avec du texte :

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Exemple : boutons avec icônes de début et de fin

Vous pouvez également ajouter des icônes au début (avec leadingIcon) ou à la fin (avec trailingIcon) du texte pour fournir un contexte supplémentaire.

Le code suivant crée un bouton avec une icône de début :

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}