Number
...
Browser support
Parameters
The Web component uses the <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. |
value
The value to be displayed as a number.
locale
The locale to be used to format the number. If not set, the default locale of the browser will be used.
unit
The unit to be displayed with the number.
truncate
If set, the number will be truncated.
compact
The number will be displayed in a compact format.
decimals
The number of decimals to be displayed. If not set, the default number of decimals of the number will be used. The maximum number of decimals is 5.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.0/@zurich/web-components/number.js"></script>Code
html
<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>