switch

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 single switch.

You can set different kind of properties like the labeltext or different styling aspects like the colors of the background, the label or the checked state. Further more there are configuration functions for accessing the checked state of this box or totally disable it. For a detailed overview about the possible properties of the component object itself, have a look at SwitchComponent

Example usage

// Use a store
val cheeseStore = storeOf(false)
switch(value=cheeseStore) {
     label("with extra cheese") // set the label
     size { normal } // choose a predefined size
}

// all state management can also be done manually if needed:
switch {
     label("with extra cheese") // set the label
     size { normal } // choose a predefined size
     checked(cheeseStore.data) // link a [Flow<Boolean>] in order to visualize the checked state
     events { // open inner context with all DOM-element events
         changes.states() handledBy cheeseStore.update // connect the changes event with the state store
     }
}

Parameters

baseClass

optional CSS class that should be applied to the element

build

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

the ID of the element

prefix

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

styling

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

value

a boolean store to handle the state and its changes automatically

switch

See also

Parameters