Modal - Web Component

...

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <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

The available slots for the component are:

Name	Tags	Description
default	span

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.4.5/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.5/@zurich/web-components/modal.js"></script>
<script type="module" src="/0.4.5/@zurich/web-components/button.js"></script>

Code

<z-button id="button" z-button="primary" icon="arrow-diagonal:line">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>