popover

fun RenderContext.popover(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "popover", build: PopoverComponent.() -> Unit = {})

This component enables to render a popover thats floats around a trigger. The trigger can be a simple HTMLElement or a fritz2 component. The Popover can be containing a header, a section and a footer. All "areas" are optional and it containing a simple String, a flowOf<String> or a HTMLElement as well as a fritz2 component. The placement of the Popover is configurable.

The popover has a default close Button, you can hide it or you can use your own custom Button. The trigger is marked by an arrow, you can hide the arrow.

popover {
trigger {
icon { fromTheme { arrowForward } }
}
placement { right }
header(flowOf("Our simple Popover"))
content {
div {
text("My Text in a HTMLTag")
}
}
footer("Footercontent")
}

See also

Parameters

baseClass

optional CSS class that should be applied to the element

build

a lambda expression for setting up the component itself. Details in PopoverComponent

id

the ID of the element

prefix

the prefix for the generated CSS class resulting in the form `$prefix-$hash`

styling

a lambda expression for declaring the styling as fritz2's styling DSL