Views
5 months ago

tornadofx-guide

6. Type Safe CSS class

6. Type Safe CSS class MyStyle: Stylesheet() { companion object { val critical by cssclass() } init { critical { borderColor += box(Color.ORANGE) padding = box(5.px) button { backgroundColor += Color.RED textFill = Color.WHITE } } } } Now when you apply critical to say, an HBox , all buttons inside that HBox will get that defined style for button (Figure 6.7) class MyApp: App(MyView::class, MyStyle::class) { init { reloadStylesheetsOnFocus() } } class MyView: View() { override val root = hbox { addClass(MyStyle.critical) button("Warning!") button("Danger!") } } Figure 6.7 There is one critical thing to not confuse here. The orange border is only applied to the HBox since the critical class was applied to it. The buttons do not get an orange border because they are children to the HBox . While their style is defined by critical , they do not inherit the styles of their parent, only those defined for button . 80

6. Type Safe CSS If you want the buttons to get an orange border too, you need to apply the critical class directly to them. You will want to use the and() to apply specific styles to buttons that are also declared as critical . class MyStyle: Stylesheet() { companion object { } val critical by cssclass() init { critical { borderColor += box(Color.ORANGE) padding = box(5.px) } } } and(button) { backgroundColor += Color.RED textFill = Color.WHITE } class MyApp: App(MyView::class, MyStyle::class) { init { reloadStylesheetsOnFocus() } } class MyView: View() { override val root = hbox { addClass(MyStyle.critical) button("Warning!") { } addClass(MyStyle.critical) } } button("Danger!") { } addClass(MyStyle.critical) Figure 6.8 81

GUIDE
Guide
Guide
GUIDE
GUIDE
Guide
Guide
GUIDE
Guide
GUIDE
GUIDE
GUIDE