CheckboxGroupComponent

class CheckboxGroupComponent<T>

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 flowOf(List<T>)

  • the label(mapping) of a switch (static, dynamic via a Flow<String> or customized content of a Div.RenderContext ) the the example 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 )

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

  • choose the direction of checkbox elements (row vs column)

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>>)
checkboxGroup(store = myStore) {
items { flowOf(options) } or use items(options) // provide a list of items you can
}

// 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>>)
checkboxGroup(store = myStore) {
label {
it.second
}
size { large }
items { flowOf(options) } or use items(options) // provide a list of items you can
checkedStyle {{
background { color {"green"}}
}}
}

Constructors

CheckboxGroupComponent
Link copied to clipboard
js
fun CheckboxGroupComponent()

Types

Companion
Link copied to clipboard
js
object Companion

Functions

checkedStyle
Link copied to clipboard
js
fun checkedStyle(value: () -> Style<BasicParams>)
direction
Link copied to clipboard
js
fun direction(value: CheckboxGroupComponent.Companion.CheckboxGroupLayouts.() -> Style<BasicParams>)
disabled
Link copied to clipboard
js
fun disabled(value: Boolean)
fun disabled(value: () -> Flow<Boolean>)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
icon
Link copied to clipboard
js
fun icon(value: () -> IconDefinition)
items
Link copied to clipboard
js
fun items(value: () -> Flow<List<T>>)
fun items(value: List<T>)
itemStyle
Link copied to clipboard
js
fun itemStyle(value: () -> Style<BasicParams>)
label
Link copied to clipboard
js
fun label(value: (T) -> String)
labelStyle
Link copied to clipboard
js
fun labelStyle(value: () -> Style<BasicParams>)
size
Link copied to clipboard
js
fun size(value: CheckboxSizes.() -> Style<BasicParams>)
toString
Link copied to clipboard
js
open fun toString(): String

Properties

checkedStyle
Link copied to clipboard
js
var checkedStyle: Style<BasicParams>
direction
Link copied to clipboard
js
var direction: Style<BasicParams>
disabled
Link copied to clipboard
js
var disabled: Flow<Boolean>
icon
Link copied to clipboard
js
var icon: IconDefinition
items
Link copied to clipboard
js
var items: Flow<List<T>>
itemStyle
Link copied to clipboard
js
var itemStyle: Style<BasicParams>
label
Link copied to clipboard
js
var label: (T) -> String
labelStyle
Link copied to clipboard
js
var labelStyle: Style<BasicParams>
size
Link copied to clipboard
js
var size: CheckboxSizes.() -> Style<BasicParams>