Checkbox
This class combines the configuration and the core styling of a checkbox group. The rendering itself is also done within the companion object.
In order to render a checkbox group use the checkboxGroup factory function!
This class offers the following configuration features:
the items as a List<T>
the preselected items via a Flow<List<T>>
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 (checkbox)
the style checked state
the style of the label
the checked icon ( use our icon library of our theme)
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 CheckboxGroupComponent 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<List<String>>(emptyList())
checkboxGroup(items = options, values = myStore) {
}
// one can handle the events and preselected item also manually if needed:
val options = listOf("A", "B", "C")
checkboxGroup(items = options) {
selectedItems(options.skip(1)) // for selecting "B" and "C" or an empty list (default)
// if nothing should be selected at all
events {
selected handledBy someStoreOfString
}
}
// use case showing some styling options and a complex data type
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>>(emptyList())
checkboxGroup(items = myPairs, values = myStore) {
label { it.second } // adjust label representation to specific model characteristics
size { large }
checkedStyle {
background { color {"green"} }
}
}
// use custom layouts for the checkbox labels by specifying a label-renderer:
val options = listOf("A", "B", "C")
checkboxGroup(items = options) {
labelRendering { item ->
span({
fontFamily { mono }
background {
color { primary.highlight }
}
}) {
+item
}
}
}