Le composant 'stepper' permet aux utilisateurs d'augmenter ou de diminuer une valeur numérique de manière incrémentielle. Les utilisateurs peuvent également saisir des valeurs numériques directement dans le champ de saisie.
Pour les paramètres numériques avec une valeur par défaut claire que la plupart des utilisateurs sont susceptibles de sélectionner.
Pour ajuster des champs numériques d'une petite quantité, avec un maximum de 10 incréments ou décréments. Par exemple, vous pouvez utiliser le composant stepper pour modifier le nombre de passagers d'un véhicule ou le nombre de copies à effectuer.
Si utilisé fréquemment, des écarts importants par rapport à la valeur par défaut sont à prévoir.
Pour sélectionner une valeur unique ou une plage de valeurs à partir d'un ensemble d'options fixe. Utilisez plutôt le curseur à la place.
Pour les variables continues, comme l'âge, la taille, le prix ou la distance. Utilisez la saisie numérique pour indiquer la valeur exacte dans une large plage.
Le composant stepper comprend les éléments suivants :
Étiquette : indique la valeur modifiée par le stepper, comme le nombre de passagers.
Bouton Diminuer : le bouton Diminuer réduit la valeur. La valeur diminue de 1 lorsqu'un utilisateur clique sur le bouton.
Valeur : valeur actuellement sélectionnée ou prédéfinie. les utilisateurs peuvent entrer manuellement une valeur numérique en cliquant sur le champ de saisie de texte.
Bouton Augmenter : le bouton Augmenter augmente la valeur. La valeur augmente de 1 lorsqu'un utilisateur clique sur le bouton.
Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
Utilisez des verbes au présent et la forme active dans la plupart des cas.
Placez une étiquette claire et visible en dehors du champ de saisie du stepper. Le texte de l'étiquette doit expliquer l'objectif du composant stepper et fournir du contexte à l'utilisateur. Un champ de saisie sans étiquette est ambigu et ne permet pas l'accessibilité.
Note: La propriété label est obligatoire pour le composant Stepper. Si vous ne souhaitez pas que l'étiquette soit visible, vous pouvez passer hideLabel = true sous la propriété label.
Placez une étiquette permanente en dehors du champ.
Ne supposez pas que le champ est explicite sans étiquette.
Utilisez le texte d'aide pour communiquer des informations pertinentes, telles que la valeur d'entrée maximale ou minimale.
Utilisez le texte d'aide pour fournir une aide ou un contexte supplémentaire à l'utilisateur.
N'utilisez pas le texte d'aide pour simplement reformuler les mêmes informations que celles qui apparaissent dans l'étiquette.
Utiliser un texte d'erreur pour guider les utilisateurs
Le texte du message d'erreur indique à l'utilisateur comment corriger l'erreur. Dans le cas du stepper, les erreurs sont souvent liées à des données non valides ou à un champ obligatoire laissé vide.
Mettez la 1re lettre du 1er mot en majuscule pour le texte d'erreur. Rédigez 1 à 2 phrases courtes et complètes qui se terminent par un point.
Utilisez le texte d'erreur pour guider l'utilisateur et lui proposer une solution.
Ne rédigez pas de messages d'erreur ambigus ou ne laissez pas les utilisateurs deviner comment résoudre un problème.
Utilisez un astérisque (*) pour indiquer les champs obligatoires. L'astérisque précède l'étiquette du champ. Cela permet aux utilisateurs de localiser facilement les champs devant obligatoirement être renseignés en regardant uniquement le caractère le plus à gauche de l'étiquette.
En plus de marquer les champs obligatoires par un astérisque, il est recommandé d'inclure des instructions claires en haut du formulaire, telles que « Tous les champs marqués d'un astérisque sont obligatoires », afin de vous assurer que les utilisateurs comprennent la signification de l'astérisque.
Utilisez un astérisque pour signaler qu'un champ est obligatoire.
N'utilisez pas d'astérisque pour signaler quelque chose qui est facultatif.
Le champ stepper a des états pour activé, désactivé, focus, erreur, lecture seule, et affichage uniquement.
Les éléments de contrôle du stepper utilisent des boutons d'icône. Pour en savoir plus sur les états des boutons d'icône, reportez-vous à la documentation sur les états des boutons.
État
Description
Activé (par défaut)
Indique à l'utilisateur que l'élément est prêt à interagir.
Désactivé
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs locaux. Par exemple, une case à cocher située au-dessus du champ de saisie doit être cochée pour accéder à ce champ de saisie. Un utilisateur peut effectuer une action pour l'activer en interagissant avec la page.
Focus
Indique que l'utilisateur a mis l'élément en évidence, généralement en utilisant une méthode de saisie comme un clavier ou la voix.
Erreur
Indique que l'utilisateur a commis une erreur de validation. Une étiquette de validation fournit des informations permettant aux utilisateurs de corriger la saisie.
Lecture seule
Indique à l'utilisateur que la valeur de saisie ne peut pas être modifiée en raison de facteurs externes. Par exemple, pas d'accès en écriture. Un utilisateur peut effectuer une action pour l'activer, par exemple en contactant un administrateur.
Affichage uniquement
L'état Affichage uniquement est utilisé dans deux cas :
Un élément d'interface utilisateur est utilisé en mode affichage.
Un élément d'interface utilisateur est affiché en mode édition, mais il n'est jamais modifiable.
Les utilisateurs peuvent entrer manuellement une valeur numérique en cliquant sur le champ de saisie de texte. Ils peuvent également augmenter ou diminuer la valeur de manière incrémentielle en cliquant sur l'icône Ajouter ou Diminuer.
Chaque élément du composant stepper de Jutro est indexé par tabulation et, à ce titre, est accessible à l'aide de la touche Tab. Les valeurs peuvent être augmentées ou diminuées à l'aide de la barre d'espace et de la touche Entrée. La valeur dans le champ de saisie peut également être définie explicitement à l'aide des touches fléchées ou en saisissant la valeur manuellement.
Les boutons Plus et Moins comprennent respectivement un attribut aria-label « Augmenter la valeur » et « Diminuer la valeur ». Ils peuvent être modifiés dans Storybook dans les champs messageProps. Le champ de saisie utilise aria-live="polite" pour transmettre sa valeur aux utilisateurs aveugles et il est associé au texte de l'étiquette du composant via aria-labelledby.
Définissez la valeur la plus fréquemment sélectionnée comme valeur par défaut du stepper. Par exemple, 1 est généralement le nombre d'adultes par défaut pour la réservation d'une chambre d'hôtel, tandis que 0 peut être le nombre d'enfants par défaut dans une réservation d'hôtel.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Value of input. Takes precedence over initialValue. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Bien que les propriétés min et max puissent être utilisées pour restreindre les valeurs qui peuvent être définies dans le composant à l'aide des boutons (+) et (-), il existe trois façons différentes pour le composant Stepper de définir une valeur en dehors de ces limites :
Propriétés initialValue ou value : ces propriétés peuvent accepter n'importe quel nombre et si celui qui est fourni est en dehors des limites définies, il sera quand même utilisé.
Saisie manuelle par l'utilisateur : l'utilisateur est autorisé à saisir n'importe quel nombre, même s'il est en dehors des limites définies
En cas de valeur initialValue ou de valeur saisie manuellement en dehors des limites, le composant Stepper effectuera les opérations suivantes :
Désactive le bouton (+) si la valeur est supérieure à la valeur de la propriété max.
Désactive le bouton (-) si la valeur est inférieure à la valeur de la propriété min.
Définit la valeur sur les valeurs min ou max définies lorsque l'on clique sur le bouton correspondant.
Bien que certains composants de Jutro puissent fournir des fonctionnalités complémentaires ou une fonction d'aide pour faciliter le processus de validation, il vous appartient, en tant que développeur, de gérer la validation de toute entrée utilisateur (en utilisant ou non les fonctions d'aide complémentaires) et de déterminer les messages d'erreur à afficher.
Le comportement des composants Jutro est basé sur l'implémentation du développeur.
Quand est-ce que des messages d'erreur s'affichent ?
Les messages d'erreur ne s'affichent que lorsque vous les transmettez au composant via la propriété stateMessages. Cette propriété reçoit un objet avec le contenu suivant :
Le composant affiche chaque message d'erreur fourni dans le même ordre que dans la série.
Quand la validation a-t-elle lieu ?
Cette décision vous revient en tant que développeur. Étant donné que les composants ne déterminent pas le moment où la validation est effectuée ou le moment où l'erreur doit être affichée, vous devez implémenter la logique pour la traiter en fonction des exigences du projet, par exemple lorsque l'utilisateur modifie le contenu, lorsque le composant active une autre fenêtre et lors de la soumission du formulaire.
Consultez la section Utilisation pour découvrir comment concevoir correctement un stepper et connaître les différentes options de configuration que nous proposons.
Vous pouvez autoriser l'utilisateur à saisir un numéro à l'aide du composant Stepper. Utilisez ensuite le gestionnaire pour obtenir le numéro sélectionné.
Le composant Stepper ne fournit pas de logique de validation spécifique, mais il permet d'inclure la validation du développeur et d'utiliser la propriété pour afficher tout message d'erreur requis.
Il s'agit d'un exemple de traitement de la validation lorsque onChange est déclenché. Entrez une valeur inférieure à 0 ou supérieure à 10 sans utiliser de boutons pour tester.
exportfunctionStepperValidation(){ const[validationMessages, setValidationMessages]=useState({}); const max =10; const min =0; const onChange =useCallback((e, newValue)=>{ setValidationMessages({}); if(newValue &&(newValue > max || newValue < min)){ setValidationMessages({ error:['Value must be between 0 and 10'], }); } },[]); return( <Stepper label="Enter Number" secondaryLabel="From 1 to 10 inclusive" onChange={onChange} stateMessages={validationMessages} min={min} max={max} /> ); }
Un chemin d’importation à partir de @jutro/components a été ajouté pour le composant Stepper.
L’ancien chemin d’importation à partir de @jutro/components/new sera supprimé dans une prochaine version majeure.
Il est conseillé aux utilisateurs d’exécuter la commande suivante pour appliquer un codemod afin de mettre à jour les chemins d’importation dans votre code.
