Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Bouton

Effectue une action quand touché par l'utilisateur. Ce sont des objets de l'interface utilisateur hautements flexibles qui ont une grande variété de styles. Consultez le guide de codage pour la façon de mettre en œuvre des boutons qui ressemblent à ceux décrits ici.

Caractéristiques

  • Les boutons ont deux composantes : une cible visuelle et une cible de toucher. La cible de toucher est toujours plus grande, afin de réduire les erreurs de ciblage en rendant la touche plus facile à toucher.
  • Les boutons ont deux états : normal et pressé.
  • Ils peuvent aussi être désactivés, ce qui signifie qu'ils sont inutilisables, et sont seulement affichés pour indiquer qu'ils sont désactivés.

Il y a différents types de boutons :

Boutons d'action
Utilisés lorsqu'il n'y a que quelques actions et qu'une liste n'est pas nécessaire. Le bouton d'action principal utilise une couleur spéciale pour indiquer que c'est la première option.
Boutons de listes
Utilisés lors de l'affichage d'une liste d'actions, ou pour déclencher l'affichage d'un sélecteur de valeur.
Boutons de champ de saisie
Utilisés pour effectuer des actions avec les champs de saisie.
Boutons spéciaux/personnalisés
Utilisés pour fournir des actions spécifiques, comme l'enregistrement, la numérotation, etc.

Captures d'écran

Voici quelques exemples visuels de ce à quoi les boutons devraient ressembler. N'oubliez pas que vous pouvez utiliser les feuilles de style et des ressources d'images fournies dans le guide de codage pour les implémenter.

Boutons d'action

Utilisés lorsqu'il n'y a que quelques actions et qu'une liste n'est pas nécessaire. Le bouton d'action principal utilise une couleur spéciale pour indiquer que c'est la première option.

   Première action Seconde action Supprimer
Normal
Pressé
Désactivé

Sur un fond sombre, les boutons d'action ont une apparence spéciale, comme ci-dessous.

  Première action Seconde action
Désactivé

Boutons de liste

Utilisés lors de l'affichage d'une liste d'actions, ou pour déclencher l'affichage d'un sélecteur de valeur.

Déclencheurs

  Déclencher une action dans la vue actuelle Déclencher une action dans une nouvelle vue Afficher un sélecteur de valeur
Normal
Pressé
Désactivé

Sélecteur de valeur

Une fois que le sélecteur de valeur a été ouvert, vous aurez besoin d'au moins un bouton sur le panneau de sélection de valeur pour annuler ledit sélecteur de valeur. Ces boutons doivent ressembler à ce qui suit:

Normal Pressé Désactivé

Boutons de champ de saisie

Les boutons de champ de saisie sont des boutons associés à un champ de saisie, qui, lorsqu'il est pressé, effectuent une action liée à ce champ de saisie.

Normal Pressé Désactivé

Boutons spéciaux

Les boutons spéciaux sont des boutons de style visuels avec des icônes, utilisés à des fins spéciales, telles que l'exploitation de la caméra de l'appareil, répondre et raccrocher le téléphone, et l'activation de la numérotation au clavier. Vous pouvez bien sûr trouver d'autres utilisations pour ce style de bouton.

Boutons photo

Ces butons n'ont pas d'état désactivé, vous n'avez tout simplement pas besoin de les afficher si la prise de photos n'est pas disponible.

  Enregistrement vidéo Arrêter l'enregistrement vidéo Prendre photo
Normal
Pressé

Boutons téléphone

  Répondre Raccrocher Masquer le clavier
Normal
Pressé
Désactivé

Boutons personnalisés

Voici des exemples boutons personnalisés, ici pour ajouter un contact.

Normal
Pressé
Désactivé

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : teoli, Goofy, Omnilaika02
 Dernière mise à jour par : teoli,