SNumberField <s-number-field>

Un champ numérique avec minimum, maximum et pas facultatifs. SNumberField est le wrapper Vue 3 typé du web component <s-number-field> de Shopify Polaris.

import { SNumberField } from 'polaris-vue-elements'

Bonnes pratiques

• Réservez-le aux valeurs purement numériques. Utilisez-le pour des quantités, des mesures ou des pourcentages. Si une valeur peut contenir des lettres ou des symboles, comme un code produit ou un numéro de téléphone, utilisez plutôt STextField.
• Affichez l'unité. Utilisez prefix ou suffix pour indiquer ce que mesure le nombre, afin que les marchands n'aient pas à deviner s'ils saisissent des dollars, des kilogrammes ou un pourcentage.
• Fixez des limites conformes à vos règles métier. Donnez à min et max des valeurs qui reflètent ce qui est réellement autorisé, ce qui oriente les marchands vers des saisies valides avant qu'ils ne soumettent le formulaire.
• Validez et expliquez les erreurs. Vérifiez chaque saisie numérique et, en cas d'échec, utilisez error pour dire exactement ce qui ne va pas et comment le corriger plutôt que d'afficher un message générique.

<SNumberField label="Discount" suffix="%" :min="0" :max="100" />

Consultez les bonnes pratiques de Shopify pour <s-number-field> (en anglais) pour l'ensemble des recommandations.

Exemple

Value: 1

<script setup>
import { ref } from 'vue'
import { SNumberField } from 'polaris-vue-elements'

const value = ref('1')
</script>

<template>
  <SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model sur <SNumberField> est lié à la propriété value et écoute l'event DOM input.

<SNumberField v-model="value" />

équivaut à :

<SNumberField :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	Une indication sur le contenu attendu du champ. Lorsqu'elle vaut on (valeur par défaut), cette propriété indique que le champ doit prendre en charge le remplissage automatique, sans autre information sémantique sur le contenu attendu. Lorsqu'elle vaut off, vous indiquez que ce champ contient des informations sensibles ou des contenus jamais enregistrés, comme des codes à usage unique. Vous pouvez aussi fournir une valeur décrivant précisément les données que vous souhaitez voir saisies dans ce champ lors du remplissage automatique.
defaultValue	string	La valeur par défaut du champ.
details	any	Texte supplémentaire apportant du contexte ou des indications pour le champ. Ce texte est affiché avec le champ et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur. Il est également exposé aux utilisateurs de lecteurs d'écran.
disabled	boolean	Désactive le champ, empêchant toute interaction.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
id	string	Un identifiant unique pour l'élément.
inputMode	"decimal" | "numeric"	Le type de clavier virtuel à afficher sur les appareils mobiles. - decimal : affiche un clavier numérique avec séparateur décimal, adapté aux prix ou aux mesures. - numeric : affiche un clavier numérique sans séparateur décimal, adapté aux nombres entiers comme les quantités. En savoir plus sur l'attribut inputmode.
label	any	Contenu à utiliser comme libellé du champ.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
max	number	Le nombre décimal ou entier le plus élevé accepté par le champ. Utilisé avec step, la valeur est arrondie à l'inférieur au nombre max. Remarque : l'utilisateur pourra toujours saisir au clavier un nombre supérieur au max. Il appartient au développeur d'ajouter la validation appropriée.
min	number	Le nombre décimal ou entier le plus bas accepté par le champ. Utilisé avec step, la valeur est arrondie au supérieur au nombre min. Remarque : l'utilisateur pourra toujours saisir au clavier un nombre inférieur au min. Il appartient au développeur d'ajouter la validation appropriée.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
placeholder	string	Une courte indication décrivant la valeur attendue du champ.
prefix	string	Une valeur affichée juste avant la partie modifiable du champ. Utile pour afficher une partie implicite de la valeur, comme "https://" ou "+353". L'utilisateur ne peut pas la modifier, et elle n'est pas incluse dans la valeur du champ. Elle peut ne s'afficher qu'après une interaction de l'utilisateur avec la saisie. Par exemple, un libellé en ligne peut occuper la place du préfixe jusqu'à ce que l'utilisateur donne le focus à la saisie.
readOnly	boolean	Le champ ne peut pas être modifié par l'utilisateur. Il reste focalisable et est annoncé par les lecteurs d'écran.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
step	number	Le pas d'augmentation ou de diminution de la valeur. Il peut s'agir d'un entier ou d'un décimal. Si un max ou un min est indiqué avec step, lorsque la valeur est augmentée ou diminuée avec les boutons, la valeur finale est toujours arrondie au max ou au min plutôt qu'à la valeur valide la plus proche.
suffix	string	Une valeur affichée juste après la partie modifiable du champ. Utile pour afficher une partie implicite de la valeur, comme "@shopify.com" ou "%". L'utilisateur ne peut pas la modifier, et elle n'est pas incluse dans la valeur du champ. Elle peut ne s'afficher qu'après une interaction de l'utilisateur avec la saisie. Par exemple, un libellé en ligne peut occuper la place du suffixe jusqu'à ce que l'utilisateur donne le focus à la saisie.
value	string

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Écoutez-les avec des listeners de la forme @blur sur <SNumberField>.

Slots

Slot	Description
details
error