ModalComponent

class ModalComponent

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

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

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 into the ModalComponent.show function and the `ModalComponent.Companion.init` block.

Constructors

ModalComponent
Link copied to clipboard
js
fun ModalComponent()

Types

Companion
Link copied to clipboard
js
object Companion
ModalsStack
Link copied to clipboard
js
class ModalsStack : RootStore<List<ModalRenderContext>>

Functions

closeButton
Link copied to clipboard
js
fun closeButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "modal-close-button", build: PushButtonComponent.() -> Unit = {})
content
Link copied to clipboard
js
fun content(value: RenderContext.() -> Unit)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hasCloseButton
Link copied to clipboard
js
fun hasCloseButton(value: Boolean)
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
size
Link copied to clipboard
js
fun size(value: ModalSizes.() -> Style<BasicParams>)
toString
Link copied to clipboard
js
open fun toString(): String
variant
Link copied to clipboard
js
fun variant(value: ModalVariants.() -> Style<BasicParams>)

Properties

closeButton
Link copied to clipboard
js
var closeButton: RenderContext.(SimpleHandler<Unit>) -> Unit? = null
content
Link copied to clipboard
js
var content: RenderContext.() -> Unit? = null
hasCloseButton
Link copied to clipboard
js
var hasCloseButton: Boolean = true
size
Link copied to clipboard
js
var size: ModalSizes.() -> Style<BasicParams>
variant
Link copied to clipboard
js
var variant: ModalVariants.() -> Style<BasicParams>