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

None

Attributes

number (observed)

Reflects the number that is in the light DOM.

format (observed)

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

type (observed)

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)

Methods

None

Events

None

Styling hooks

None