Valeur numérique des numéros de téléphone internationaux
Utilisation
Il s'agit d'un composant utilitaire pour l'affichage et le formatage des données. Il n'existe donc pas de directives d'expérience utilisateur spécifiques.
Code
<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />
Instruction d'importation
import { PhoneNumberValue } from '@jutro/components';
Cahier des charges du composant
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.
Propriétés
className- Type
stringDescriptionCSS class name for this component.
dataType- Type
'string' | 'object'DescriptionType of returned value.
Valeur par défaut'object' defaultCountry- Type
ISOCountryCodesDescriptionDefault country code to be rendered. Must be an ISO country code string.
id- Type
stringDescriptionUnique identifier for the component.
path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
prefix- TypeDescription
Optional prefix message to be attached in front of the value.
showCountryCodeForReadOnly- Type
booleanDescriptionDetermines whether the country code is visible if the phone number is rendered in
readOnlymode.Valeur par défauttrue suffix- TypeDescription
Optional suffix message to be attached at the end the value.
tag- Type
stringDescriptionThe HTML tag to use when rendering the outermost element of this component.
Valeur par défaut'div' value- TypeDescription
Value to display.
Crochets
Aucun crochet n'est disponible pour PhoneNumberValue.
Clés de traduction
Il n'existe aucune traduction pour PhoneNumberValue.
Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.
Portes de sortie
Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.
Exemples
Consultez la section Utilisation pour savoir comment concevoir correctement une valeur de numéro de téléphone et connaître les différentes options de configuration que nous proposons.
Exemple de numéro de téléphone de base
Vous pouvez donner à la propriété value un objet du formulaire { phoneNumber: string } qui l'affichera sous la forme d'un numéro de téléphone. Elle ajoutera un code pays en fonction de vos paramètres régionaux et appliquera d'autres formatages requis.
<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />
Exemple de code pays
Vous pouvez spécifier un code pays à ajouter au numéro en incluant une propriété countryCode dans l'objet utilisé comme value.
Cette propriété utilise un objet comme { code: string }, où la chaîne est un code ISO de pays valide.
<PhoneNumberValue value={{
countryCode: { code: "IE" },
phoneNumber: "01-123456" // Note this is rendered with the leading 0 removed due to the presence of an Irish country code
}} />
Exemple de code pays par défaut
La propriété defaultCountryCode vous permet d'indiquer un code pays par défaut à utiliser à la place de celui basé sur vos paramètres régionaux.
<PhoneNumberValue
value={{ phoneNumber: "01-123456" }}
defaultCountryCode="IE"
/>
Exemple de masquage du code pays
Vous pouvez afficher un numéro de téléphone sans le code pays en définissant showCountryCodeForReadOnly sur false.
<PhoneNumberValue
value={{ phoneNumber: "555-123456" }}
showCountryCodeForReadOnly={ false }
/>
Exemple de valeur de chaîne
Vous pouvez utiliser une valeur de chaîne, mais vous devez également définir dataType sur false.
<PhoneNumberValue
value="555-123456"
dataType='string'
/>