PatternFly Elements - Home PatternFly Elements

Number

Overview

Number helps display numbers in a consistent type and format.

Ordinal numbers

1, 2, 3, 4

Bytes

2017, 4430292

Abbreviations

12345, 1000000

Percentages

0.5678, 1.2039

e

2000000

Thousands

97654321.12345678

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:

Methods

None

Events

None

Styling hooks

None