Floating banner - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-floating-banner> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot |
|---|---|---|---|
header | string | Header of the banner | header |
config | string | Configuration of the banner | |
closable | boolean | Enables the close button | |
accept-button-text | string | Text of the accept button | accept-button-text |
reject-button-text | string | Text of the reject button | reject-button-text |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
accept | void | |
reject | void | |
close | void |
The available slots for the component are:
| Name | Tags | Description |
|---|---|---|
default | span | Content of the banner |
header | span | Header of the banner |
actions | span | Actions of the banner |
accept-button-text | span | Accept button text |
reject-button-text | span | Reject button text |
header
The header parameter is a string that defines the header of the floating banner.
Also, you can use the header slot to define 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.
Both buttons can be customized using the accept-button and reject-button slots.
You can add custom using the actions slot.