The format-datetime component is used to display numbers in a human-readable format. The element reflects the Intl.NumberFormat API.
Example
code
<script type="module">
import '@blueprintui/components/include/format-number.js';
</script>
<div bp-layout="block gap:md">
<bp-format-number>1234567</bp-format-number>
<bp-format-number format="percent">123.4567</bp-format-number>
<bp-format-number format="decimal">123.4567</bp-format-number>
</div>
Currency
code
<script type="module">
import '@blueprintui/components/include/format-number.js';
</script>
<div bp-layout="block gap:md">
<bp-format-number currency="USD">12345.67</bp-format-number>
<bp-format-number currency="EUR">12345.67</bp-format-number>
</div>
Text
test some text
code
<script type="module">
import '@blueprintui/components/include/format-number.js';
</script>
<p bp-text="body">test some text <bp-format-number>1234567</bp-format-number> test some text</p>
Install
NPM
// npm package
import '@blueprintui/components/include/format-number.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/format-number.js/+esm';
</script>
Accessibility
- Number formats should be localized to the user's locale. The
locale
attribute can be used to set the locale. If no locale is provided, the user's locale will be used.
bp-format-number
Properties
Name | Types | Description |
---|---|---|
format | 'currency' | 'decimal' | 'percent' | |
currency | string | |
locales | string[] | |
currencySign | 'standard' | 'accounting' | |
currencyDisplay | 'symbol' | 'code' | 'name' | |
compactDisplay | 'short' | 'long' | |
unitDisplay | 'long' | 'short' | 'narrow' | |
notation | 'standard' | 'scientific' | 'engineering' | 'compact' | |
signDisplay | | 'auto' | 'never' | 'always' | 'exceptZero' |
Attributes
Name | Types | Description |
---|---|---|
format | 'currency' | 'decimal' | 'percent' | |
currency | string | |
locales | string[] | |
currency-sign | 'standard' | 'accounting' | |
currency-display | 'symbol' | 'code' | 'name' | |
compact-display | 'short' | 'long' | |
unit-display | 'long' | 'short' | 'narrow' | |
notation | 'standard' | 'scientific' | 'engineering' | 'compact' | |
sign-display | | 'auto' | 'never' | 'always' | 'exceptZero' |