RadioGroupComponent

open class RadioGroupComponent<T>(items: List<T>, store: Store<T>?) : Component<Unit> , InputFormProperties, SeverityProperties

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) 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 (radio)

  • the style selected state

  • the style of the label

  • 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 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, store = 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, store = myStore) {
label { it.second }
size { large }
selectedStyle {
background { color {"green"} }
}
}

Constructors

RadioGroupComponent
Link copied to clipboard
js
fun <T> RadioGroupComponent(items: List<T>, store: Store<T>? = null)

Types

Companion
Link copied to clipboard
js
object Companion
EventsContext
Link copied to clipboard
js
class EventsContext<T>(selected: Flow<T>)

Functions

enabled
Link copied to clipboard
js
open override fun enabled(value: Boolean)
open override fun enabled(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
render
Link copied to clipboard
js
open override fun render(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass?, id: String?, prefix: String)
Central method that should do the actual rendering of a component.
severity
Link copied to clipboard
js
open override fun severity(value: SeverityProperties.SeverityContext.() -> Severity)
Property to manage the severity value of the component.
severityClassOf
Link copied to clipboard
js
open override fun severityClassOf(severityStyle: SeverityStyles, prefix: String): Flow<StyleClass>
This function manages the task to map a value of the Severity enumeration to a corresponding style defined within the SeverityStyles interface.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

direction
Link copied to clipboard
js
val direction: ComponentProperty<RadioGroupComponent.Companion.RadioGroupLayouts.() -> Style<BasicParams>>
disabled
Link copied to clipboard
js
open override val disabled: DynamicComponentProperty<Boolean>
events
Link copied to clipboard
js
val events: ComponentProperty<RadioGroupComponent.EventsContext<T>.() -> Unit>
itemStyle
Link copied to clipboard
js
val itemStyle: ComponentProperty<Style<BasicParams>>
label
Link copied to clipboard
js
val label: ComponentProperty<(T) -> String>
labelStyle
Link copied to clipboard
js
val labelStyle: ComponentProperty<Style<BasicParams>>
readonly
Link copied to clipboard
js
open override val readonly: DynamicComponentProperty<Boolean>
selectedItem
Link copied to clipboard
js
val selectedItem: NullableDynamicComponentProperty<T>
selectedStyle
Link copied to clipboard
js
val selectedStyle: ComponentProperty<Style<BasicParams>>
severity
Link copied to clipboard
js
open override val severity: NullableDynamicComponentProperty<Severity?>
size
Link copied to clipboard
js
val size: ComponentProperty<FormSizes.() -> Style<BasicParams>>