popover

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

This component enables to render a popover thats floats around a toggle element. The toggle 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 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 toggle element is marked by an arrow, you can hide the arrow.

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

See also

Parameters

styling

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

baseClass

optional CSS class that should be applied to the element

id

the ID of the element

prefix

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

build

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