Modal

Dialog that focuses user attention exclusively on an information via a window that is overlaid on primary content.

Import

import {
  MpModal,
  MpModalOverlay,
  MpModalContent,
  MpModalHeader,
  MpModalFooter,
  MpModalBody,
  MpModalCloseButton
} from '@mekari/pixel3'

Playground

API

MpModal

Props

Events

Slots

Name	Type	Default
id Id of modal.	string	-
is-open If true, modal will open.	boolean	false
is-block-scroll-on-mount If true, scrolling will be only active in modal body.	boolean	true
is-close-on-esc If true, pressing esc key modal will close.	boolean	true
is-close-on-overlay-click If true, when overlay clicked modal will close.	boolean	true
is-keep-alive If true, modal will be hidden using CSS instead of destroying DOM.	boolean	false
is-centered If true, modal will be centered on screen.	boolean	false
is-disable-portal If true, modal portal will be disabled.	boolean	false
is-disable-focus-trap If true, focus trap will be disabled.	boolean	false
scroll-behavior Where scroll behaviour should originate.	"inside" | "outside" | "auto"	outside
size Size of modal.	"sm" | "md" | "lg" | "xl" | "2xl" | "full";	md

MpModalContent

Slots

Name	Type
default Modal content slot	any

MpModalHeader

Slots

Name	Type
default Modal header slot	any

MpModalBody

Slots

Name	Type
default Modal body slot	any

MpModalFooter

Slots

Name	Type
default Modal footer slot	any

Usage

Scrollable

Size