Package dev.fritz2.components

Types

DropdownComponent

open class DropdownComponent : Component<Unit>

This class combines the configuration and rendering of a dropdown.

NavbarComponent

open class NavbarComponent : Component<Unit>

PopoverComponent

open class PopoverComponent : Component<Unit> , CloseButtonProperty

This class combines the configuration and rendering a popover that floats around a toggle element.

Functions

alert

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

Creates an alert and renders it right away.

alertToast

fun alertToast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "toast-alert", build: AlertToastComponent.() -> Unit): SimpleHandler<Unit>

This factory method creates a toast with an alert as it's content that will be shown when the returned handler is triggered, eg.

appFrame

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

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

asAlert

fun ComponentValidationMessage.asAlert(renderContext: RenderContext, build: AlertComponent.() -> Unit = { })

Convenience extension to display a ComponentValidationMessage as an alert.

fun ComponentValidationMessage.asAlert(styling: BasicParams.() -> Unit = { }, renderContext: RenderContext, build: AlertComponent.() -> Unit = { })

Convenience extension function to display a ComponentValidationMessage as an alert.

box

fun RenderContext.box(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "box", content: Div.() -> Unit): Div

This component represents the simplest layout component possible: A simple `div` that acts as a container for arbitrary content.

card

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

This factory function creates a CardComponent.

checkbox

fun RenderContext.checkbox(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "checkboxComponent", build: CheckboxComponent.() -> Unit = {}): Label

This component generates a single checkbox.

checkboxGroup

fun <T> RenderContext.checkboxGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, values: Store<List<T>>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "checkboxGroupComponent", build: CheckboxGroupComponent<T>.() -> Unit = {}): Div

This component generates a group of checkboxes.

clickButton

fun RenderContext.clickButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "click-button", build: PushButtonComponent.() -> Unit = {}): DomListener<MouseEvent, HTMLButtonElement>

This component generates a simple button.

dataTable

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, selection: Store<T?>, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

fun <T, I> RenderContext.dataTable(styling: GridParams.() -> Unit = {}, rows: RootStore<List<T>>, rowIdProvider: (T) -> I, selection: Store<List<T>>, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = DataTableComponent.prefix, build: DataTableComponent<T, I>.() -> Unit = {})

This component factory generates a data table.

dropdown

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

Creates a dropdown component.

file

fun RenderContext.file(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "file", build: FileSelectionBaseComponent.() -> Unit = {}): Flow<File>

This factory generates a single file selection context.

files

fun RenderContext.files(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "file", build: FileSelectionBaseComponent.() -> Unit = {}): Flow<List<File>>

This factory generates a multiple file selection context.

flexBox

fun RenderContext.flexBox(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "flex-box", scope: ScopeContext.() -> Unit = {}, content: Div.() -> Unit): Div

This component represents a layout component with flex property.

formControl

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

This component wraps input elements like inputField, selectField, checkbox, checkboxGroup, radioGroup.

formGroup

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

This component is meant to act a a grouping component for formControls.

gridBox

fun RenderContext.gridBox(styling: GridParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "grid-box", scope: ScopeContext.() -> Unit = {}, content: Div.() -> Unit): Div

This component represents a layout component with grid property.

icon

fun RenderContext.icon(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = IconComponent.prefix, build: IconComponent.() -> Unit = {})

This component enables to render an icon.

inputField

fun RenderContext.inputField(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "inputField", build: InputFieldComponent.() -> Unit = {}): Input

This component generates a text based input field.

lineUp

fun RenderContext.lineUp(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "line-up", build: LineUpComponent.() -> Unit = {}): Div

This layout component enables the horizontal stacking of child components.

linkButton

fun RenderContext.linkButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "link-button", build: LinkButtonComponent.() -> Unit = {})

This component generates a simple link button.

fun RenderContext.menu(styling: BoxParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "menu", build: MenuComponent.() -> Unit)

This component creates a menu.

modal

fun modal(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "modal", build: ModalComponent.() -> Unit): SimpleHandler<Unit>

This component provides some modal dialog or messagebox.

navBar

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

paper

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

This factory function creates a PaperComponent.

popover

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

Creates a popover component.

popup

fun Tag<HTMLElement>.popup(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String = "fc2-popup-${Id.next()}", prefix: String = "popup", build: PopupComponent.() -> Unit): Div

This component creates a popup.

pushButton

fun RenderContext.pushButton(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "push-button", build: PushButtonComponent.() -> Unit = {})

This component generates a simple button.

radio

fun RenderContext.radio(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "radioComponent", build: RadioComponent.() -> Unit = {}): Label

This component generates a single radio.

radioGroup

fun <T> RenderContext.radioGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "radioGroupComponent", build: RadioGroupComponent<T>.() -> Unit = {}): Div

This component generates a group of radio buttons.

selectField

fun <T> RenderContext.selectField(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "selectField", build: SelectFieldComponent<T>.() -> Unit): Label

This function generates a selectField element.

showAlertToast

fun showAlertToast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "toast-alert", build: AlertToastComponent.() -> Unit)

This factory method creates a toast with an alert as its content and displays it right away.

showToast

fun showToast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "toast", build: ToastComponent.() -> Unit)

This factory method creates a toast and displays it right away.

slider

fun RenderContext.slider(styling: BasicParams.() -> Unit = {}, value: Store<Int>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "slider", build: SliderComponent.() -> Unit = {}): Div

This component generates a slider.

fun RenderContext.slider(styling: BasicParams.() -> Unit = {}, value: Int, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "slider", build: SliderComponent.() -> Unit = {}): Div

This component generates a slider.

spinner

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

This component generates an animated spinner.

stackUp

fun RenderContext.stackUp(styling: FlexParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "stack-up", build: StackUpComponent.() -> Unit = {}): Div

This layout component enables the vertical stacking of child components.

switch

fun RenderContext.switch(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "switchComponent", build: SwitchComponent.() -> Unit = {}): Label

This component generates a switch.

textArea

fun RenderContext.textArea(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "textArea", build: TextAreaComponent.() -> Unit): TextArea

This component generates a TextArea.

toast

fun toast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "toast", build: ToastComponent.() -> Unit): SimpleHandler<Unit>

This factory method creates a toast that will be shown when the returned handler is triggered, eg.

tooltip

fun StyleParams.tooltip(vararg text: String): BasicParams.() -> Unit

fun StyleParams.tooltip(vararg text: String, tooltipPlacement: TooltipPlacements.() -> Style<BasicParams>): BasicParams.() -> Unit

fun Tag<HTMLElement>.tooltip(vararg text: String, build: TooltipComponent.() -> Unit)

tooltip factory function that allow a terser creation for just static text as tooltip's content.

fun Tag<HTMLElement>.tooltip(styling: BasicParams.() -> Unit = {}, text: String? = null, baseClass: StyleClass = StyleClass.None, id: String = "fc2-tooltip-${Id.next()}", prefix: String = "tooltip", build: TooltipComponent.() -> Unit): Div

This factory function creates a Tooltip.

typeAhead

fun RenderContext.typeAhead(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, items: Proposal, baseClass: StyleClass = StyleClass.None, id: String? = value?.id, prefix: String = "typeAhead", build: TypeAheadComponent.() -> Unit = {}): Input

The typeAhead factory function creates a TypeAheadComponent.