MainModal

A specialised version of a modal component, made to contain a full search application.

Props

Name	Description	Type	Default
animation	Animation to use for opening/closing the modal.	AnimationProp
closeEvents	Events to listen for closing the main modal.	XEvent[]	() => ['UserClickedCloseX', 'UserClickedOutOfMainModal']
focusOnOpen	Determines if the focused element changes to one inside the modal when it opens. Either the first element with a positive tabindex or just the first focusable element.	boolean	false
openEvents	Events to listen for opening the main modal.	XEvent[]	() => ['UserClickedOpenX', 'UserOpenXProgrammatically']
outOfModalClickEvent	Event to be emitted by the modal when clicked out of its content.	(String as PropType) || null	'UserClickedOutOfMainModal'

Slots

Name	Description	Bindings (name - type - description)
default		None

Events

This component emits the following events:

• UserClickedOutOfMainModal (opens new window)

See it in action

Here you have a basic example of how the main modal works.

Customizing the content with classes

The contentClass prop can be used to add classes to the modal content.

Customizing the modal events

The modal events can be customized by changing its props values:

• To add or subtract events to open or close the modal,
• To modify or remove the default UserClickedOutOfMainModal (opens new window) that the modal emits.

In this example, we are changing the openEvents prop to add another event, and removing the event that the modal would emit when the user clicks out of the modal.