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.2/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.2/@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>