Banner

Used to display a visual promotional message.

Importing

To use the banner component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/banner";

register(); // Now the banner component is ready to use!

Web (Option 2)

import { registerBanner } from "@tapsioss/web-components";

registerBanner(); // Now the banner component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/banner/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Banner } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-banner></tapsi-banner>

React

<Banner />

Properties

Name	Attribute Name	Description	Type	Default Value
heading	heading	The heading text to display in the banner.	string	""
description	description	The description text to display in the banner.	string	""
image	image	The URL of the background image to display in the banner.	string	""
variant	variant	The variant style of the banner.	"default" | "hero"	"default"
backgroundColor	background-color	The background color of the banner.	string	DEFAULT_BACKGROUND_COLOR
textColor	text-color	The text color of the banner.	string	DEFAULT_TEXT_COLOR

Slots

Name	Value	Description
DEFAULT	-	The slot for action element.
ACTION	action	The slot for action element.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { BannerSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/banner";

React

// Option 1
import { BannerSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Banner";