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
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.

Floating banner content

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.

Floating banner headerFloating banner content

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.

Floating banner content

Both buttons can be customized using the accept-button and reject-button slots.

Floating banner contentAcceptDecline

You can add custom using the actions slot.

Floating banner contentVisitSave

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example