How do you handle conditional classes?
`div("App-t...
# javascriptp
Pavel Shorokhov
03/21/2019, 7:34 PMHow do you handle conditional classes?
div("App-toolbar-button " + "App-toolbar-button__selected".takeIf { state.pageSelected == 0 }) {c
Casey Brooks
03/21/2019, 7:39 PMMy first thought is to put the conditional logic into a read-only property, and then interpolate that property into the class string.
Copy code
kotlin
div("App-toolbar-button $selectedClass")
val selectedClass: String
get() = if(state.pageSelected == 0) "App-toolbar-button__selected" else ""l
louiscad
03/21/2019, 8:46 PMYou can also use a collection of
StringjoinToString(" ")p
Pavel Shorokhov
03/21/2019, 9:07 PMDirty solution, and too verbose imho
j
jw
03/21/2019, 9:19 PMFix your DSL to expose classes as a list
p
Pavel Shorokhov
03/21/2019, 9:21 PMSeems, I found pretty solution
Copy code
div("App-toolbar-button") {
attrs {
if (pageSelected == 0) classes += "App-toolbar-button__selected"
}
}Pavel Shorokhov
03/21/2019, 9:21 PMIt allows to use static classes in tag, and conditional classes in attrs.
2 Views