Floating banner - Web Component
The FloatingBanner component can be used imported from:
Playground
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 | A11y |
|---|---|---|---|---|
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 |
Events
This component has events. Check the documentation about how to use the events.
| Name | Payload | Description |
|---|---|---|
accept | void | |
reject | void | |
close | void |
Slots
This component has slots. Check the documentation about how to use the slots.
| 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 |
Parameters use
content
The content parameter is used to define the content of the floating banner component. It uses the default slot too.
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".
Actions
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.
Browser support
Detected engine:
Chromium
Webkit
Gecko