Number

Overview

Number helps display numbers in a consistent type and format.

Installation

npm install @patternfly/pfe-number

Usage

Ordinal numbers

1, 2, 3, 4

<pfe-number type="ordinal" number="1">1</pfe-number>
<pfe-number type="ordinal" number="2">2</pfe-number>
<pfe-number type="ordinal" number="3">3</pfe-number>
<pfe-number type="ordinal" number="4">4</pfe-number>

Bytes

2017, 4430292

<pfe-number type="bytes" number="2017">2017</pfe-number>
<pfe-number type="bytes" number="4430292">4430292</pfe-number>

Abbreviations

12345, 1000000

<pfe-number type="abbrev" number="12345">12345</pfe-number>
<pfe-number type="abbrev" number="1000000">1000000</pfe-number>

Percentages

0.5678, 1.2039

<pfe-number type="percent" number="0.5678">0.5678</pfe-number>
<pfe-number type="percent" number="1.2039">1.2039</pfe-number>

e

2000000

<pfe-number type="e" number="2000000">2000000</pfe-number>

Thousands

97654321.12345678

<pfe-number type="thousands" number="97654321.12345678">97654321.12345678</pfe-number>

Slots

Attributes

number

Reflects the number that is in the light DOM.

DOM Property

number

Type

number | undefined

Default

unknown

type

The type of display you want to show.

The options for type are:

• ordinal: (1st, 2nd, 3rd, 4th)
• bytes: (2 KiB, 9.54 Mib, 93 Gib)
• abbrev: (1k, 1m, 1b)
• percent: (10%, 50%, 100%)
• e: (2.000e+6)
• thousands: (97 654 321.123)

DOM Property

type

Type

'abbrev'|'bytes'|'e'|'ordinal'|'ordinal'|'percent'|'thousands'|'NONE'

Default

'NONE'

format

Reflects the format that is being used to display the number.

DOM Property

format

Type

string | undefined

Default

unknown

DOM Properties

Methods

Events

CSS Custom Properties

CSS Shadow Parts

None