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
html
<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
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>