Package dev.fritz2.components

Types

AlertComponent
Link copied to clipboard
js
open class AlertComponent : Component<Unit>
A component to display an alert consisting of an icon, title and description.
AppFrameComponent
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
open class AppFrameComponent : Component<Unit>
This class combines the configuration and the core rendering of the app-frame.
CheckboxComponent
Link copied to clipboard
js
open class CheckboxComponent(store: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties
This class combines the configuration and the core styling of a checkbox.
CheckboxGroupComponent
Link copied to clipboard
js
open class CheckboxGroupComponent<T>(items: List<T>, store: Store<List<T>>?) : Component<Unit> , InputFormProperties, SeverityProperties
This class combines the configuration and the core styling of a checkbox group.
CloseButtonMixin
Link copied to clipboard
js
class CloseButtonMixin(closeButtonPrefix: String, defaultStyle: Style<BasicParams>) : CloseButtonProperty
Default implementation of the CloseButtonProperty interface in order to apply this as mixin for a component
CloseButtonProperty
Link copied to clipboard
js
interface CloseButtonProperty
This interface offers some convenience properties for adding a close button to a component.
Component
Link copied to clipboard
js
interface Component<T>
Marker interface that every component should implement, so that the central render method appears in a unified way throughout this framework.
ComponentProperty
Link copied to clipboard
js
class ComponentProperty<T>(value: T)
Generic container for modeling a property for a component class.
ControlGroupRenderer
Link copied to clipboard
js
class ControlGroupRenderer(component: FormControlComponent) : ControlRenderer
ControlRenderer
Link copied to clipboard
js
interface ControlRenderer
DefaultOverlay
Link copied to clipboard
js
class DefaultOverlay(method: OverlayMethod, styling: Style<BasicParams>) : Overlay
DynamicComponentProperty
Link copied to clipboard
js
class DynamicComponentProperty<T>(values: Flow<T>)
Generic container for modeling a property for a component class that could be either consist on a value or on a Flow of a value.
ElementMixin
Link copied to clipboard
js
class ElementMixin<T> : ElementProperties<T>
Default implementation of the ElementProperties interface in order to apply this as mixin for a component
ElementProperties
Link copied to clipboard
js
interface ElementProperties<T>
An interface for exposing an HTML element.
EventMixin
Link copied to clipboard
js
class EventMixin<T : Element> : EventProperties<T>
Default implementation of the EventProperties interface in order to apply this as mixin for a component
EventProperties
Link copied to clipboard
js
interface EventProperties<T : Element>
An interface for exposing the events of a component.
FileReadingStrategy
Link copied to clipboard
js
typealias FileReadingStrategy = (File) -> Flow<File>

function for reading the jsFile to a File with File.content as a String

FileSelectionBaseComponent
Link copied to clipboard
js
abstract class FileSelectionBaseComponent
This abstract class is the base configuration for file inputs.
FormControlComponent
Link copied to clipboard
js
open class FormControlComponent : Component<Unit> , FormProperties
This component class manages the configuration of a formControl and some render centric functionalities.
FormMixin
Link copied to clipboard
js
open class FormMixin : FormProperties
Default implementation of the FormProperties interface in order to apply this as mixin for a component
FormProperties
Link copied to clipboard
js
interface FormProperties
This interface add typical state properties for en- or disabling form components.
IconComponent
Link copied to clipboard
js
open class IconComponent : Component<Unit> , EventProperties<SVGElement>
Class for configuring the appearance of an icon.
InputFieldComponent
Link copied to clipboard
js
This class deals with the configuration of an input element.
InputFormMixin
Link copied to clipboard
js
class InputFormMixin : FormMixin, InputFormProperties
Default implementation of the InputFormProperties interface in order to apply this as mixin for a component
InputFormProperties
Link copied to clipboard
js
interface InputFormProperties : FormProperties
This interface offers a convenience property for input form based components.
LineUpComponent
Link copied to clipboard
js
class LineUpComponent : StackComponent
This component class just defines the core styling in order to render child items within a flexBox layout horizontally.
ManagedComponent
Link copied to clipboard
js
interface ManagedComponent<T>
This interface marks
ModalComponent
Link copied to clipboard
js
open class ModalComponent(build: ModalComponent.(SimpleHandler<Unit>) -> Unit) : ManagedComponent<SimpleHandler<Unit>> , CloseButtonProperty
This component class offers primarily some configuration options for modal dialogs.
ModalRenderContext
Link copied to clipboard
js
typealias ModalRenderContext = RenderContext.(level: Int) -> Div
MultiFileSelectionComponent
Link copied to clipboard
js
open class MultiFileSelectionComponent : FileSelectionBaseComponent, Component<Flow<List<File>>>
Specific component for handling the upload for an arbitrary amount of files.
MultiSelectionStore
Link copied to clipboard
js
open class MultiSelectionStore<T> : RootStore<List<T>>
This store can be used for components with an internal store that has to deal with a List of some type T.
NavbarComponent
Link copied to clipboard
js
open class NavbarComponent : Component<Unit>
NullableDynamicComponentProperty
Link copied to clipboard
js
class NullableDynamicComponentProperty<T>(values: Flow<T?>)
Generic container for modeling a property for a component class that could be either consist on a nullable value or on a Flow of a nullable value.
Overlay
Link copied to clipboard
js
interface Overlay
OverlayMethod
Link copied to clipboard
js
enum OverlayMethod : Enum<OverlayMethod>
PopoverComponent
Link copied to clipboard
js
open class PopoverComponent : Component<Unit> , CloseButtonProperty
Class for configuring the appearance of a PopoverComponent.
PushButtonComponent
Link copied to clipboard
js
This class combines the configuration and the core rendering of a button.
RadioComponent
Link copied to clipboard
js
open class RadioComponent(store: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties
This class combines the configuration and the core styling of a switch.
RadioGroupComponent
Link copied to clipboard
js
open class RadioGroupComponent<T>(items: List<T>, store: Store<T>?) : Component<Unit> , InputFormProperties, SeverityProperties
This class combines the configuration and the core styling of a radio group.
SeverityMixin
Link copied to clipboard
js
class SeverityMixin : SeverityProperties
Default implementation of the SeverityProperties interface in order to apply this as mixin for a component
SeverityProperties
Link copied to clipboard
js
interface SeverityProperties
This interface defines convenience properties and helper functions to easily apply Severity based behaviour to a component.
SingleControlRenderer
Link copied to clipboard
js
class SingleControlRenderer(component: FormControlComponent) : ControlRenderer
SingleFileSelectionComponent
Link copied to clipboard
js
open class SingleFileSelectionComponent : FileSelectionBaseComponent, Component<Flow<File>>
Specific component for handling the upload for one file at once.
SingleSelectionStore
Link copied to clipboard
js
open class SingleSelectionStore : RootStore<Int?>
This store can be used for components with an internal store that has to deal with a single element selection from a collection of predefined values (like for a selectField or radioGroup component)It is based upon the index of an item from the list represented by the Int type.
SpinnerComponent
Link copied to clipboard
js
open class SpinnerComponent : Component<Unit> , EventProperties<HTMLDivElement>
This component class offers different configuration values of a spinner.
StackComponent
Link copied to clipboard
js
abstract class StackComponent : Component<Div> , EventProperties<HTMLDivElement>
This base component class for stacking components offer some configuration properties.
StackUpComponent
Link copied to clipboard
js
class StackUpComponent : StackComponent
This component class just defines the core styling in order to render child items within a flexBox layout vertically.
Svg
Link copied to clipboard
js
class Svg(id: String?, baseClass: String?, domNode: SVGElement, job: Job) : Tag<SVGElement>
SwitchComponent
Link copied to clipboard
js
open class SwitchComponent(store: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties
This class combines the configuration and the core styling of a switch.
TextAreaComponent
Link copied to clipboard
js
open class TextAreaComponent(store: Store<String>?) : Component<Unit> , EventProperties<HTMLTextAreaElement> , ElementProperties<TextArea> , InputFormProperties, SeverityProperties
This class handles the configuration of an textarea elementThe TextArea can be configured for the following aspects:
  • the size of the element

  • the direction of resizing

  • some predefined styles

  • a default value

  • the base options of the HTML input element can be set. Attributes

  • For a detailed explanation and examples of usage have a look at the textArea function !

ToastComponent
Link copied to clipboard
js
open class ToastComponent : ManagedComponent<Unit> , CloseButtonProperty
This class combines the configuration and the core styling of a toast.

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.
appFrame
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
fun RenderContext.appFrame(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "app", build: AppFrameComponent.() -> Unit = {})
This component implements a standard responsive layout for web-apps.
asAlert
Link copied to clipboard
js
fun ComponentValidationMessage.asAlert(renderContext: RenderContext, size: FormSizes.() -> Style<BasicParams> = { normal }, stacking: AlertStacking.() -> Style<BasicParams> = { separated })
Convenience extension 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", init: Div.() -> Unit): Div
This component represents the simplest layout component possible: A simple `div` that acts as a container for arbitrary content.
checkbox
Link copied to clipboard
js
fun RenderContext.checkbox(styling: BasicParams.() -> Unit = {}, store: 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>, store: 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 = "push-button", build: PushButtonComponent.() -> Unit = {}): DomListener<MouseEvent, HTMLButtonElement>
This component generates a simple button.
createIconSvgElement
Link copied to clipboard
js
fun createIconSvgElement(baseClass: String?): SVGElement
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", init: 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.
gridBox
Link copied to clipboard
js
fun RenderContext.gridBox(styling: GridParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "grid-box", init: 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 = {}, store: 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.
modal
Link copied to clipboard
js
fun modal(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "modal", build: ModalComponent.(SimpleHandler<Unit>) -> 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 = {})
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 = {})
This component enables to render a popover thats floats around a toggle element.
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 = {}, store: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "radioComponent", build: RadioComponent.() -> Unit = {}): Label
This component generates a single checkbox.
radioGroup
Link copied to clipboard
js
fun <T> RenderContext.radioGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, store: 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.
randomId
Link copied to clipboard
js
fun randomId(): String
Creates a random id based on random number and timestamp.
showToast
Link copied to clipboard
js
fun showToast(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ToastComponent.defaultToastContainerPrefix, build: ToastComponent.() -> Unit)
This factory method creates a toast and displays it right away.
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.
svg
Link copied to clipboard
js
fun RenderContext.svg(baseClass: String?, id: String?, init: Svg.() -> Unit): Svg
switch
Link copied to clipboard
js
fun RenderContext.switch(styling: BasicParams.() -> Unit = {}, store: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "switchComponent", build: SwitchComponent.() -> Unit = {}): Label
This component generates a single switch.
textArea
Link copied to clipboard
js
fun RenderContext.textArea(styling: BasicParams.() -> Unit = {}, store: 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 = ToastComponent.defaultToastContainerPrefix, 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

Properties

xmlns
Link copied to clipboard
js
const val xmlns: String