Radio
This class combines the configuration and the core styling of a radio group. The rendering itself is also done within the companion object.
In order to render a checkbox group use the radioGroup factory function!
This class offers the following configuration features:
the items as a List<T>
optionally set a predefined item; if nothing is set or "null", nothing gets selected at first
the label(mapping) static or dynamic via a Flow<String> or customized content see the examples below
some predefined styling variants (size)
the style of the items (radio)
the style selected state
the style of the label
choose the orientation of checkbox elements (vertical or horizontal)
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 RadioGroupComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the checkbox.
Example usage
// simple use case showing the core functionality
val options = listOf("A", "B", "C")
val myStore = storeOf("B") // or ``null`` to select nothing
radioGroup(items = options, value = myStore) {
}
// one can handle the events and preselected item also manually if needed:
val options = listOf("A", "B", "C")
radioGroup(items = options) {
selectedItem("A") // or "null" (default) if nothing should be selected at all
events {
selected handledBy someStoreOfString
}
}
// use case showing some styling options and a store of List<Pair<Int,String>>
val myPairs = listOf((1 to "ffffff"), (2 to "rrrrrr" ), (3 to "iiiiii"), (4 to "tttttt"), ( 5 to "zzzzzz"), (6 to "222222"))
val myStore = storeOf(<List<Pair<Int,String>>)
radioGroup(items = myPairs, value = myStore) {
label { it.second }
size { large }
selectedStyle {
background { color {"green"} }
}
}
// use custom layouts for the checkbox labels by specifying a label-renderer:
val options = listOf("A", "B", "C")
radioGroup(items = options) {
labelRendering { item ->
span({
fontFamily { mono }
background {
color { primary.highlight }
}
}) {
+item
}
}
}