Format Number

npm1.8.3

The format-datetime component is used to display numbers in a human-readable format. The element reflects the Intl.NumberFormat API.

Example

1234567

123.4567

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

12345.67

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 text1234567test 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'`
`value`	`number`

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'`