menu
0.11.5
Modal
Control to display modal content with optional header and footer content.
Module
import '@capitec/omni-components/modal';
content_copy 
import { OmniModal } from "@capitec/omni-components-react/modal";
content_copy
Source
Packages
Interactive
Header Label
Header Align
Header Slot
No Header
Footer Slot
No Footer
Scripted Modal
Interactive Header Label Header Align Header Slot No Header Footer Slot No Footer Scripted Modal

Properties

Name Attribute Type Description
headerLabel header-label  
string
 Title text to be displayed in header area.
headerAlign header-align  
'left' | 'center' | 'right' | undefined
 Header text horizontal alignment:
- left Align header to the left.
- center Align header to the center.
- right Align header to the right.
hide hide  
boolean | undefined
 If true, will hide the modal.
noHeader no-header  
boolean | undefined
 If true, will not display the header section of the modal
noFooter no-footer  
boolean | undefined
 If true, will not display the footer section of the modal
noFullscreen no-fullscreen  
boolean | undefined
 If true, will not apply the modal as fullscreen on mobile viewports.
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Static Functions

Name Parameters Returns Description
show 
init - ModalInit
 
Modal | undefined
 Creates a new Modal element with the provided context and appends it to the DOM (either to document body or to provided target parent element).

Events

Name Type Description
click-outside 
CustomEvent
 Dispatched when a click or touch occurs outside the modal container.

Types

Name Type
ModalInit 
{
    /**
     * The id to apply to the Modal element.
     */
    id?: string;

    /**
     * The container to append the Modal as child. If not provided will append to a new div element on the document body.
     */
    parent?: string | HTMLElement | DocumentFragment | null;

    /**
     * A function that returns, or an instance of content to render as modal body
     */
    body: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render in the modal header
     */
    header?: RenderFunction | RenderResult;

    /**
     * A function that returns, or an instance of content to render in the modal footer
     */
    footer?: RenderFunction | RenderResult;

    /**
     * Header text alignment:
     *  - `left` Align header to the left.
     *  - `center` Align header to the center.
     *  - `right` Align header to the right.
     */
    headerAlign?: 'left' | 'center' | 'right';

    /**
     * If true, will not display the header section of the modal
     */
    noHeader?: boolean;

    /**
     * If true, will not display the footer section of the modal
     */
    noFooter?: boolean;

    /**
     * If true will not apply the modal as fullscreen on mobile viewports.
     */
    noFullscreen?: boolean;
}

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
header
 Content to render inside the component header. 
[Default Slot]
 Content to render inside the component body. 
footer
 Content to render inside the component footer.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-modal-dialog-top
 Top position for wrapping HTMLDialogElement. 
--omni-modal-dialog-left
 Left position for wrapping HTMLDialogElement. 
--omni-modal-dialog-right
 Right position for wrapping HTMLDialogElement. 
--omni-modal-dialog-bottom
 Bottom position for wrapping HTMLDialogElement. 
--omni-modal-dialog-background
 Background for wrapping HTMLDialogElement backdrop. 
--omni-modal-container-padding
 Padding for modal content container. 
--omni-modal-container-box-shadow
 Box shadow for modal content container. 
--omni-modal-max-width
 Max width for modal content container. 
--omni-modal-min-width
 Min width for modal content container. 
--omni-modal-max-height
 Max height for modal content container. 
--omni-modal-header-font-color
 Font color for modal header. 
--omni-modal-header-font-family
 Font family for modal header. 
--omni-modal-header-font-size
 Font size for modal header. 
--omni-modal-header-font-weight
 Font weight for modal header. 
--omni-modal-header-background
 Background for modal header. 
--omni-modal-header-padding-left
 Left padding for modal header. 
--omni-modal-header-padding-top
 Top padding for modal header. 
--omni-modal-header-padding-right
 Right padding for modal header. 
--omni-modal-header-padding-bottom
 Bottom padding for modal header. 
--omni-modal-header-border-radius
 Border radius for modal header. 
--omni-modal-body-font-color
 Font color for modal body. 
--omni-modal-body-font-size
 Font size for modal body. 
--omni-modal-body-font-family
 Font family for modal body. 
--omni-modal-body-font-weight
 Font weight for modal body. 
--omni-modal-body-padding
 Padding for modal body. 
--omni-modal-body-background
 Background for modal body. 
--omni-modal-body-overflow
 Overflow for modal body. 
--omni-modal-no-header-body-border-top-radius
 Top border radius for modal body when there is no header. 
--omni-modal-no-footer-body-border-bottom-radius
 Bottom border radius for modal body when there is no footer. 
--omni-modal-footer-text-align
 Text align for modal footer. 
--omni-modal-footer-padding
 Padding for modal footer. 
--omni-modal-footer-font-color
 Font color for modal footer. 
--omni-modal-footer-font-family
 Font family for modal footer. 
--omni-modal-footer-font-size
 Font size for modal footer. 
--omni-modal-footer-font-weight
 Font weight for modal footer. 
--omni-modal-footer-background
 Background for modal footer.