Segmented control - Web Component
...
Browser support
Parameters
The Web component uses a <z-segmented-control>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
name (optional) | string | |
disabled (optional) | boolean | |
options | object[] |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
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/segmented-control.js"></script>
Code
html
<!-- Default -->
<z-segmented-control name="segmented-control-2" value="1"
options='[{"text":"Text 1"}, {"text":"Text 2"}]'></z-segmented-control>
<!-- icon -->
<z-segmented-control name="segmented-control-2i" value="1"
options='[{"icon":"bar-chart:outline"}, {"icon":"bar-chart:outline"}]'></z-segmented-control>
<!-- combined -->
<z-segmented-control name="segmented-control-2c" value="1"
options='[{"icon":"bar-chart:outline"}, {"icon":"bar-chart:outline","text":"Text 1"}]'></z-segmented-control>
<!-- disabled -->
<z-segmented-control name="segmented-control-2d" value="1" disabled
options='[{"text":"Text 1"}, {"text":"Text 2"}]'></z-segmented-control>