Floating banner - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-floating-banner> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
header(optional) | string | Header of the banner |
config(optional) | string | Configuration of the banner |
closable(optional) | boolean | Enables the close button |
accept-button-text(optional) | string | Text of the accept button |
reject-button-text(optional) | string | Text of the reject button |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onaccept | void | |
onreject | void | |
onclose | void |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | |
header | span | |
actions | span |
header
The header parameter is a string that defines the header of the floating banner.
config
The config parameter is a string that defines the floating banner configuration. You can configure the position of the banner.
left
The left modifier is used to align the floating banner to the left. Also it will automatically add a z-smiling-z component to the floating banner.
small
The small modifier is used to render the small variant of the z-smiling-face. To use this modifier you need to add the left modifier to the z-floating-banner as well. The pattern is config="left:small".
accept-button-text
The accept-button-text parameter is a string that defines the text of the accept button.
reject-button-text
The reject-button-text parameter is a string that defines the text of the reject button.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/floating-banner.js"></script>Code
html
<z-floating-banner header="Privacy notice" accept-button-text="Accept" reject-button-text="Decline">
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus, non metus egestas feugiat a hac risus leo
purus,per tempor fusce vivamus varius porta ornare. Justo interdum libero nunc fermentum auctor dictum,
laoreet magna mus ridiculus ornare ut mauris, etiam pharetra habitasse non tristique.
</z-floating-banner>