Modal

Display a modal dialog box, providing a title, content area, and action buttons.

Importing

To use the modal 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/modal";

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

Web (Option 2)

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

registerModal(); // Now the modal component is ready to use!

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

Web

import "@tapsioss/web-components/modal/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 { Modal } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-modal></tapsi-modal>

React

<Modal />

Properties

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

Methods

Name	Description	Parameters
show	Show the modal.
hide	Hide the modal.

Slots

Name	Value	Description
IMAGE	image	The slot for actionbar element.
ACTION_BAR	action-bar	The slot for actionbar element.

TIP

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

Web

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

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

React

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

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

Events

Name	Description	Type	Bubbles	Cancelable
show	Fires when the modal should be visible.	ShowEvent	❌	✅
hide	Fires when the modal should be hidden.	HideEvent	❌	✅

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 ModalShowEvent,
 ModalHideEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(ShowEvent.type, handleShow);
element.addEventListener(HideEvent.type, handleHide);

// Option 2
element.addEventListener(ModalShowEvent.type, handleShow);
element.addEventListener(ModalHideEvent.type, handleHide);