Modal

The Modal Component is a customizable, reusable component that can be used to display content in a modal window. It can be used to display a form, an image, or any other type of content that requires user interaction.

Anatomy

• Backdrop - This is a semi-transparent background that covers the main content of the page, highlighting the modal and making it the focus of attention.
• Header - This is the top section of the modal. Contains header text that describes the purpose of the modal.
• Close button - Button, located in the header, that allows the user to close the modal by clicking on it.
• Body - This is the main content area of the modal and contains the information or content that the user is interested in. This section can contain text, images, forms, or any other type of content.
• Actions - Buttons for actions, such as "OK" or "Cancel", that allow the user to interact with the modal. Uses Voca Button.

Component

<alliance-modal
    header="Header"
    actions={[
        {
            variant: 'secondary',
            action: 'cancel',
            label: 'No',
            disabled: false,
        },
        {
            variant: 'primary',
            action: 'confirm',
            label: 'Yes',
            disabled: false,
        },
    ]}
    scroll-mode="outside"
    on:action={(event) => handleEvent(event)}
>
    Basic modal text content.
</alliance-modal>

Properties

Property	Type	Required	Default	Description
header	string	Yes		Modal header.
required	boolean	No	false	Whether closing of modal through close button, clicking backdrop or escape key should be prohibited or not.
actions	Action[]	No	[]	Clickable actions in the modal footer.
scroll-mode	'outside' | 'inside'	No	'outside'	Whether scrolling should occur inside or outside the modal.

Action

Property	Type	Required	Default	Description
label	string	Yes		Button label.
action	string	Yes		Action to use when dispatching action event when clicking on the button.
variant	TeliaButtonVariant	No	'primary'	Action button variant.
disabled	boolean	No	false	Whether the action should be disabled or not.

Events

Event	Detail	Description
action	{ action: string }	Emitted when clicking the close button, the modal backdrop, an action button or when pressing the escape key.

Named slots

A "slot" is a placeholder inside a web component that users can fill with their own content.

sub-header

A slot which will be rendered below the header.

This element will not be scrolled when used in used in combination with scroll-mode="inside".

<alliance-modal header="Modal with sub header" scroll-mode="inside">
    <strong slot="sub-header">This section will not be scrolled</strong>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ipsum quam, iaculis eget
        molestie id, condimentum interdum enim. Proin vel nisl orci. Vestibulum accumsan mi non
        porttitor hendrerit. Praesent vulputate nunc sagittis purus suscipit, vitae consectetur
        metus egestas. Aenean placerat mauris vel sem bibendum, id ullamcorper mauris luctus.
        Pellentesque fringilla egestas vehicula. Nam faucibus elit et nisl tempus, id ullamcorper
        sem iaculis. Aliquam sed gravida mauris. Proin vehicula, nisi eu rhoncus volutpat, turpis
        justo varius nulla, non dictum enim nisi eget sem. Ut sed lorem neque. Aliquam ultrices
        euismod ante a sagittis. Maecenas laoreet sem metus, et scelerisque mi pulvinar sed. Donec
        maximus lobortis ipsum, sed faucibus purus.
    </p>
</alliance-modal>