ModalComponent

This component class offers primarily some configuration options for modal dialogs.

The content and structure within the modal are completely free to model. Further more there are predefined styles to easily choose a fitting size or to choose some other variants of appearance. Last but not least there is a simple closeButton predefined that automatically closes the modal. Of course the closing mechanism is free to be applied with a custom solution, as a SimpleHandler<Unit> is injected as parameter into the content property.

The modal can be configured for the following aspects:

• the overall size of the acquired space.

• some variants dealing with positioning (does not really work yet for all options)

• the content itself; can be arbitrary HTML elements or subcomponents

• a predefined close button that can be used optionally

Example usages

// use integrated close button
clickButton {
    text("Open")
} handledBy modal {
    content { // provide arbitrary content
        p { +"Hello world from a modal!" }
        p { +"Please click the X to close this..." }
    }
}

// apply custom close button
clickButton {
    text("Open")
} handledBy modal {
    hasCloseButton(false) // disable the integrated close button
    content { closeHandler -> // SimpleHandler<Unit> is injected by default
        p { +"Hello world from a modal!" }
        p { +"Please click the X to close this..." }
        clickButton { text("Close") } handledBy closeHandler // define a custom button that uses the close handler
    }
}

There are two possible overall strategies for rendering the overlay:

• only once, directly below the top modal (the default behaviour)

• before every new modal, so the more gets stacked, the more overlays gets rendered!

This can be configured via the ModalComponent.Companion.setOverlayHandler once or via a fitting handler of ModalComponent.Companion.overlay for dynamic use cases.

The actual rendering of the overlay is done within a separate interface called Overlay. There is currently one implementation DefaultOverlay that offers the possibility to freely inject the styling, so for most use cases it might be sufficient to just use the former. If there is a need to render a different structure or to bypass the dev.fritz2.styling.theme.Theme.zIndices management, a custom implementation is the way to go. The interface also enforces to pass the rendering strategy identifier via the Overlay.method property.

For a detailed understanding have a look the `ModalComponent.Companion.init` block.