Switch
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
val cheeseStore = storeOf(false)
switch(value = cheeseStore) {
label("with extra cheese") // set the label
size { normal } // choose a predefined size
}
// one can handle the events and preselect the control also 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
}
element {
// exposes the underlying HTML input element for direct access. Use with caution!
}
}