Views
7 months ago

tornadofx-guide

6. Type Safe CSS Figure

6. Type Safe CSS Figure 6.4 Multi-Value CSS Properties Some CSS properties accept multiple values, and TornadoFX Stylesheets can streamline this with the multi() function. This allows you to specify multiple values via a varargs parameter and let TornadoFX take care of the rest. For instance, you can nest multiple background colors and insets into a control (Figure 6.5). label("Lore Ipsum") { style { fontSize = 30.px backgroundColor = multi(Color.RED, Color.BLUE, Color.YELLOW) backgroundInsets = multi(box(4.px), box(8.px), box(12.px)) } } Figure 6.5 The multi() function should work wherever multiple values are accepted. If you want to only assign a single value to a property that accepts multiple values, you will need to use the plusAssign() operator to add it (Figure 6.6). 78

6. Type Safe CSS label("Lore Ipsum") { style { fontSize = 30.px backgroundColor += Color.RED backgroundInsets += box(4.px) } } Figure 6.6 Nesting Styles Inside a selector block you can apply further styles targeting child controls. For instance, define a CSS class called critical . Make it put an orange border around any control it is applied to, and pad it by 5 pixels. class MyStyle: Stylesheet() { companion object { } val critical by cssclass() } init { critical { borderColor += box(Color.ORANGE) padding = box(5.px) } } But suppose when we applied critical to any control, such as an HBox , we want it to add additional stylings to buttons inside that control. Nesting another selection will do the trick. 79

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