Modal

The <salla-modal> web component displays a dialog box or pop-up window on top of the current page. It is positioned above all other components in the application, restricting scrolling of the main page and only allowing scrolling of the modal's content. It consists of a Button component to activate the modal, and that can be customized using the properties, events, methods and slots' parameters available.

Example

Usage

HTML

SASS

Properties

Property	Attribute	Description	Type	Default
Cenetered	`cenetered`	Aligns the modal's content to be in center view	`boolean`	`'false'`
Has Skeleton	`has-skeleton`	Opens the modal on rendering the component	`boolean`	`'false'`
Icon Style	`icon-style`	Sets the modal's header icon style.	`"error" \| "success" \|"normal" \| "primary"`	`'undefined'`
Is Closable	`is-closable`	Sets the modal to be at the closing state	`boolean`	`'true'`
Is Loading	`is-loading`	Shows the loading state in the modal	`boolean`	`'false'`
No Padding	`no-padding`	Adds no Padding to the modal	`boolean`	`'false'`
Position	`position`	Positions the modal in a fixed part of the screen	`"bottom" \| "middle" \| "top"`	`'middle'`
Sub Title	`sub-title`	Sets the modal subheader context	`string`	`''`
Sub Title First	`sub-title-first`	Whether or not to show the subtitle before the title	`boolean`	`'false'`
Visible	`visible`	Shows the modal on rendering the component	`boolean`	`'false'`
Width	`width`	Adjusts the size of the modal	`"full" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`

Methods

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as close which closes the modal dialog.

Method	Description	Return Type
`close()`	Closes the modal dialog	`Promise<HTMLElement>`
`loading()`	Loads the modal dialog	`Promise<HTMLElement>`
`setTitle(modalTitle: any)`	Sets the title of the modal dialog	`Promise<HTMLElement>`
`open()`	Opens the modal dialog	`Promise<HTMLElement>`
`stopLoading()`	Stops loading the modal dialog	`Promise<HTMLElement>`

Note

To use a method, you can for instance use open the component via the method:

and close the component via the method:

Slots

Theslots makes it customizable to modify certain labels, such as footer

Slot	Description
`footer`	Footer of the modal

Events

Event	Description	Type
`modalVisibilityChanged`	This event will be fired when the modal visibilty is changed	`CustomEvent<Boolean>`

Example#

Usage#

Properties#

Methods#

Slots#

Events#

Example

Usage

Properties

Methods

Slots

Events