Valeur numérique (non monétaire)
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
<NumberValue value={123456} />
Instruction d'importation
import { NumberValue } 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
idobligatoire- Type
stringDescriptionUnique identifier for the component.
className- Type
stringDescriptionCSS class name for this component.
format- Type
'decimal' | 'percent'DescriptionThe format to display the number in.
Valeur par défaut'decimal' maximumFractionDigits- Type
numberDescriptionMaximum number of fraction digits.
Valeur par défaut3 minimumFractionDigits- Type
numberDescriptionMinimum number of fraction digits.
Valeur par défaut0 path- Type
stringDescriptionSpecifies the path to the value used to generate the output.
placeholder- TypeDescription
The string to display in the UI if 'value' is undefined/null.
Valeur par défaut'-' prefix- TypeDescription
Optional prefix message to be attached in front of the value.
showFractions- Type
booleanDescriptionIf
true, displays fractions with the value. showGrouping- Type
booleanDescriptionIf
true, displays grouping separators with the value.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- Type
numberDescriptionThe numeric value to display.
API impérative
jutro-components propose la fonction formatNumber à utiliser avec l'API de formatage impérative.
import { formatNumber } from '@jutro/components';
Cette opération importe une fonction formatNumber(intl, props, number) avec les arguments et le type de retour suivants :
Return value
- Type
stringDescriptionFormatted number string.
intl- Type
react.intl.IntlDescriptionAn instance of the imperative formatting API access object.
number- Type
numberDescriptionNumeric value override to be used instead of the one provided with props.
props- Type
NumberValue.propTypesDescriptionValid properties for a
NumberValueobject.
Crochets
Aucun crochet n'est disponible pour number value.
Clés de traduction
Il n'existe aucune traduction pour number value.
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 numérique et connaître les différentes options de configuration que nous proposons.
Exemple de valeur numérique de base
Vous pouvez utiliser le composant NumberValue pour afficher un numéro.
<NumberValue value={123456} />
Exemple de pourcentage
À la place, vous pouvez utiliser la propriété format pour afficher le nombre sous forme de pourcentage.
<NumberValue
value={0.25}
format="percent"
/>
Afficher des fractions
Vous pouvez choisir d'afficher ou non la partie fractionnaire de la valeur à l'aide de la propriété showFractions. La valeur sera arrondie au nombre entier le plus proche.
<NumberValue
value={1234.5}
showFractions={false}
/>
Exemple d'API impérative
jutro-components propose la fonction formatNumber à utiliser avec l'API de formatage impérative.
import { formatNumber } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const n1 = formatNumber(intl, { value: 1232.23, format: 'decimal' });
const n2 = formatNumber(intl, { value: 1, format: 'percent' });
const n3 = formatNumber(intl, { value: 1231232.23434, format: 'decimal', showFractions: true, maximumFractionDigits: 4 });
const n4 = formatNumber(intl, { format: 'decimal', showFractions: true }, 1.2345);
// en-US output:
1,232
100%
1,231,232.2343
1.235
// fr-FR output
1 232
100 %
1 231 232,2343
1,235