Package dev.fritz2.components

Types

DropdownComponent
Link copied to clipboard
js
open class DropdownComponent : Component<Unit>
This class combines the configuration and rendering of a dropdown.
NavbarComponent
Link copied to clipboard
js
open class NavbarComponent : Component<Unit>
PopoverComponent
Link copied to clipboard
js
open class PopoverComponent : Component<Unit> , CloseButtonProperty
This class combines the configuration and rendering a popover that floats around a toggle element.

Functions

alert
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.checkbox(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "checkboxComponent", build: CheckboxComponent.() -> Unit = {}): Label
This component generates a single checkbox.
checkboxGroup
Link copied to clipboard
js
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 = {})
This component generates a group of checkboxes.
clickButton
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.dropdown(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "dropdown", build: DropdownComponent.() -> Unit)
Creates a dropdown component.
file
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.inputField(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "inputField", build: InputFieldComponent.() -> Unit = {})
This component generates a text based input field.
lineUp
Link copied to clipboard
js
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
Link copied to clipboard
js
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.
menu
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.navBar(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "navbar", build: NavbarComponent.() -> Unit = {})
paper
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.popover(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "popover", build: PopoverComponent.() -> Unit = {})
Creates a popover component.
popup
Link copied to clipboard
js
fun RenderContext.popup(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String = "fc2-popup-${randomId()}", prefix: String = "popup", build: PopupComponent.() -> Unit): Div
This component creates a popup.
pushButton
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.radio(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "radioComponent", build: RadioComponent.() -> Unit = {}): Label
This component generates a single radio.
radioGroup
Link copied to clipboard
js
fun <T> RenderContext.radioGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "radioGroupComponent", build: RadioGroupComponent<T>.() -> Unit = {})
This component generates a group of radio buttons.
selectField
Link copied to clipboard
js
fun <T> RenderContext.selectField(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "selectField", build: SelectFieldComponent<T>.() -> Unit)
This function generates a selectField element.
showAlertToast
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.slider(styling: BasicParams.() -> Unit = {}, value: Store<Int>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "slider", build: SliderComponent.() -> Unit = {})
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 = {})
This component generates a slider.
spinner
Link copied to clipboard
js
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
Link copied to clipboard
js
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
Link copied to clipboard
js
fun RenderContext.switch(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "switchComponent", build: SwitchComponent.() -> Unit = {}): Label
This component generates a switch.
textArea
Link copied to clipboard
js
fun RenderContext.textArea(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "textArea", build: TextAreaComponent.() -> Unit)
This component generates a TextArea.
toast
Link copied to clipboard
js
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
Link copied to clipboard
js
fun StyleParams.tooltip(vararg text: String): BasicParams.() -> Unit
fun StyleParams.tooltip(vararg text: String, tooltipPlacement: TooltipPlacements.() -> Style<BasicParams>): BasicParams.() -> Unit
fun RenderContext.tooltip(vararg text: String, build: TooltipComponent.() -> Unit)
tooltip factory function that allow a terser creation for just static text as tooltip's content.
fun RenderContext.tooltip(styling: BasicParams.() -> Unit = {}, text: String? = null, baseClass: StyleClass = StyleClass.None, id: String = "fc2-tooltip-${randomId()}", prefix: String = "tooltip", build: TooltipComponent.() -> Unit): Div
This factory function creates a Tooltip.
typeAhead
Link copied to clipboard
js
fun RenderContext.typeAhead(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, items: Proposal, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "typeAhead", build: TypeAheadComponent.() -> Unit = {})
The typeAhead factory function creates a TypeAheadComponent.