appFrame

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

This component implements a standard responsive layout for web-apps.

It offers the following sections

  • sidebar with brand, nav section and optional footer on the left

  • header at the top with actions section on the right

  • main section

  • optional navigation tabs at the bottom of main section

The sidebar is moved off-screen on small screens and can be opened by a hamburger-button, that appears at the left edge of the header.

The component is responsible for rendering all these section at the right sizes and places at different viewport-sizes and on different devices.

You can adopt the appearance of all sections by adjusting the Theme.

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.