Floating banner - Web Component โ
Browser support โ
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 |
accept-button-text (optional) | string | Text of the accept button |
reject-button-text (optional) | string | Text of the reject button |
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.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@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>