Number
<quiet-number>
Outputs a number in the specified format.
<quiet-number number="10000000"></quiet-number>
Examples Jump to heading
Grouping Jump to heading
The formatter groups numbers with thousands separators by default. To turn it off, set the
grouping attribute to never.
<quiet-number grouping="never" number="10000000"></quiet-number><br>
Currency Jump to heading
To format currency, set type="currency" and apply the appropriate
ISO 4217
code to the currency attribute.
<quiet-number type="currency" currency="USD" number="25000"></quiet-number><br> <quiet-number type="currency" currency="EUR" number="25000"></quiet-number><br> <quiet-number type="currency" currency="RUB" number="25000"></quiet-number>
Percentages Jump to heading
To format a percentage, set type="percent".
<quiet-number type="percent" number="0"></quiet-number><br> <quiet-number type="percent" number="0.5"></quiet-number><br> <quiet-number type="percent" number="1"></quiet-number><br>
Units Jump to heading
You can format a variety of different units. Possible values can be found here.
<quiet-number type="unit" unit="kilobyte" number="5.1"></quiet-number><br> <quiet-number type="unit" unit="megabyte" number="3.45"></quiet-number><br> <quiet-number type="unit" unit="centimeter" number="2.54"></quiet-number><br> <quiet-number type="unit" unit="inch" number="1"></quiet-number><br> <quiet-number type="unit" unit="fahrenheit" number="75"></quiet-number><br> <quiet-number type="unit" unit="celsius" number="24"></quiet-number><br> <quiet-number type="unit" unit="hour" number="6"></quiet-number><br> <quiet-number type="unit" unit="minute" number="45"></quiet-number><br> <quiet-number type="unit" unit="second" number="8"></quiet-number><br>
Use the unit-display attribute to change how units are output. Possible values include
narrow, short, and long.
<quiet-number type="unit" unit="hour" number="12" unit-display="narrow"></quiet-number><br> <quiet-number type="unit" unit="hour" number="12" unit-display="short"></quiet-number><br> <quiet-number type="unit" unit="hour" number="12" unit-display="long"></quiet-number><br>
Localization Jump to heading
Set the lang attribute on the element to change the language.
<quiet-number lang="en" number="100000000"></quiet-number><br> <quiet-number lang="de" number="100000000"></quiet-number><br> <quiet-number lang="ru" number="100000000"></quiet-number>
This component also updates based on the page's language, which can be set using
<html lang="…">.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-number> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/number/number.js';
To manually import <quiet-number> from npm, use the following code.
import '@quietui/quiet/dist/components/number/number.js';
Properties Jump to heading
Number has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
number
|
The number to format. |
|
number
|
0
|
type
|
The formatting style to use. |
|
'decimal'
|
'decimal'
|
currency
|
The currency to use when formatting currency. Must be an ISO 4217 currency code, e.g. "EUR" for euro. If not provided, USD will be assumed. |
|
string
|
'USD'
|
currencyDisplay
currency-display
|
How to display the currency in currency formatting. |
|
'code'
|
|
currencySign
currency-sign
|
In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. |
|
'standard'
|
|
unit
|
The unit to use in unit formatting.
Possible values can be found here.
There is no default value. If the style is unit, this option must be provided.
|
|
string
|
|
unitDisplay
unit-display
|
The unit formatting style to use in unit formatting. |
|
'narrow'
|
|
minimumIntegerDigits
minimum-integer-digits
|
The minimum number of integer digits to use. A value with a smaller number of integer digits than
this number will be left-padded with zeros (to the specified length) when formatted. Possible values
are from 1 to 21. The default is 1.
|
|
number
|
|
minimumFractionDigits
minimum-fraction-digits
|
The minimum number of fraction digits to use. Possible values are from 0 to
20.
|
|
number
|
|
maximumFractionDigits
maximum-fraction-digits
|
The maximum number of fraction digits to use. Possible values are from 0 to
20.
|
|
number
|
|
minimumSignificantDigits
minimum-significant-digits
|
The minimum number of significant digits to use. Possible values are from 1 to
21; the default is 1.
|
|
number
|
|
maximumSignificantDigits
maximum-significant-digits
|
The maximum number of significant digits to use. Possible values are from 1 to
21; the default is 21.
|
|
number
|
|
roundingPriority
rounding-priority
|
Specifies how rounding conflicts will be resolved. |
|
'auto'
|
|
roundingIncrement
rounding-increment
|
Indicates the increment at which rounding should take place relative to the calculated rounding
magnitude. Possible values are 1, 2, 5, 10,
20, 25, 50, 100, 200,
250, 500, 1000, 2000, 2500, and
5000. Cannot be mixed with significant-digits rounding or any setting of
roundingPriority other than auto.
|
|
'1'
|
|
roundingMode
rounding-mode
|
How decimals should be rounded. See this page for more details. |
|
'ceil'
|
|
trailingZeroDisplay
trailing-zero-display
|
The strategy for displaying trailing zeros on whole numbers. |
|
'auto'
|
|
notation
|
The formatting that should be displayed for the number. |
|
'standard'
|
|
compactDisplay
compact-display
|
Only used when notation is compact. |
|
'short'
|
|
grouping
|
Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. |
|
'always'
|
'auto'
|
signDisplay
sign-display
|
When to display the sign for the number. |
|
'auto'
|