Number

...

Browser support

Parameters

The Web component uses a <z-number> tag.

The long option for square-* and cubic-* values is only supported for English locales.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
value	number	The value to be displayed.
locale (optional)	string	The locale to be used. If not set, the default locale of the browser will be used.
unit (optional)	string	The unit to be displayed.
truncate (optional)	boolean	The number will be truncated.
compact (optional)	boolean	The number will be displayed in a compact format.
decimals (optional)	number	The number of decimals to be displayed.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/number.js"></script>

Code

<z-number value="1.23"></z-number>
<z-number value="-1.23"></z-number>
<z-number value="1.2345" decimals="1"></z-number>
<z-number value="1" decimals="3"></z-number>
<z-number value="12345.65" locale="es"></z-number>
<z-number value="12345.65" compact></z-number>
<z-number value="45.65" truncate></z-number>
<z-number value="5.65" unit="hour"></z-number>
<z-number value="6.78" unit="square-meter" locale="es"></z-number>