Modal

The modal component.

Importing

Web

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

React

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

Component Usage

Web

<tapsi-modal></tapsi-modal>

React

<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
image	The slot for imagery element.
action-bar	The slot for actionbar element.

TIP

You can use slot names as variables:

Web

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

console.log(Slots.IMAGE); // "image"
console.log(Slots.ACTION_BAR); // "action-bar"

React

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

console.log(ModalSlots.IMAGE); // "image"
console.log(ModalSlots.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:

Web

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

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

React

import { 
  ModalShowEvent,
  ModalHideEvent
} from "@tapsioss/react-components";


// ...

<Modal
  onShowEvent={(e: ModalShowEvent) => {...}}
  onHideEvent={(e: ModalHideEvent) => {...}}
/>