Modal

The modal component.

• Import

  import "@tapsioss/web-components/modal";

• Tag

  <tapsi-modal></tapsi-modal>

Properties

Name	Description	Type	Default Value
open	Indicates whether the modal is open or not.	boolean	false
heading	Sets the title of the modal.	string	""
description	Sets the description text for the modal.	string	""
alignment	Determines the alignment of the modal's content.	"start" | "center"	"start"

Slots

Name	Description
imagery	The slot for imagery element.
action-bar	The slot for actionbar element.

TIP

You can use slot names as variables:

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

console.log(Slots.IMAGERY); // "imagery"
console.log(Slots.ACTION_BAR); // "action-bar"

Events

Name	Description	Type
show	Fires when the modal should be visible. (Cancelable)	ShowEvent
hide	Fires when the modal should be hidden. (Cancelable)	HideEvent

TIP

You can import custom event names:

import { 
  ShowEvent,
  HideEvent
} from "@tapsioss/web-components/modal";

element.addEventListener(ShowEvent.type, handleTapsiModalShow);
element.addEventListener(HideEvent.type, handleTapsiModalHide);