Modal - Web Component
...
Browser support
Parameters
The Web component uses a <z-modal>
tag.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
content | string | Content of the modal. |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | boolean | 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/modal.js"></script>
<script type="module" src="/0.3.7/@zurich/web-components/button.js"></script>
Code
html
<z-button id="button" z-button="primary" icon="arrow-diagonal:outline">Open modal</z-button>
<z-modal id="modal">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et at commodi, debitis aliquam aperiam, odit libero
rerum, error repudiandae magnam impedit neque nobis! Molestias, enim a rem quo velit facere.
</z-modal>