SwitchComponent

class SwitchComponent

This class combines the configuration and the core styling of a switch.

This class offers the following configuration features:

  • the optional label of a switch (static, dynamic via a Flow<String> or customized content of a Div.RenderContext )

  • some predefined styling variants (size)

  • the style of the switch

  • the style checked state

  • the style of the dot

  • the style of the label

  • link an external boolean flow to set the checked state of the box

  • link an external boolean flow to set the disabled state of the box

  • link events of the switch like `changes` with external handlers

This can be done within a functional expression that is the last parameter of the factory function, called `build`. It offers an initialized instance of this SwitchComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the switch.

Example usage

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
}
}

Constructors

SwitchComponent
Link copied to clipboard
js
fun SwitchComponent()

Types

Companion
Link copied to clipboard
js
object Companion

Functions

checked
Link copied to clipboard
js
fun checked(value: () -> Flow<Boolean>)
checkedStyle
Link copied to clipboard
js
fun checkedStyle(value: () -> Style<BasicParams>)
disabled
Link copied to clipboard
js
fun disabled(value: () -> Flow<Boolean>)
dotStyle
Link copied to clipboard
js
fun dotStyle(value: () -> Style<BasicParams>)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
events
Link copied to clipboard
js
fun events(value: WithEvents<HTMLInputElement>.() -> Unit)
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
label
Link copied to clipboard
js
fun label(value: Div.() -> Unit)
fun label(value: String)
fun label(value: Flow<String>)
labelStyle
Link copied to clipboard
js
fun labelStyle(value: () -> Style<BasicParams>)
size
Link copied to clipboard
js
fun size(value: SwitchSizes.() -> Style<BasicParams>)
toString
Link copied to clipboard
js
open fun toString(): String

Properties

checked
Link copied to clipboard
js
var checked: Flow<Boolean>
checkedStyle
Link copied to clipboard
js
var checkedStyle: Style<BasicParams>
disabled
Link copied to clipboard
js
var disabled: Flow<Boolean>
dotStyle
Link copied to clipboard
js
var dotStyle: Style<BasicParams>
events
Link copied to clipboard
js
var events: WithEvents<HTMLInputElement>.() -> Unit? = null
label
Link copied to clipboard
js
var label: Div.() -> Unit? = null
labelStyle
Link copied to clipboard
js
var labelStyle: Style<BasicParams>
size
Link copied to clipboard
js
var size: SwitchSizes.() -> Style<BasicParams>