TornadoFX：具有其他库的类型安全CSS

Question

I'm new to Kolin and TornadoFX and I'm currently experimenting with some of its features. I'd like to use the JFoenix-Library and style its controls using the type-safe CSS feature of TornadoFX. But I don't know how to modify styles given the CSS class of a JFoenix control.

For example, the JFXDecorator has the default CSS class jfx-decorator . To change the background color of the title bar I have to modify the class jfx-decorator-buttons-container . How can I do this with TornadoFX? In a .css file I would just use

.jfx-decorator-buttons-container {
  -fx-background-color: red;
}

Is this possible with TornadoFX?

Answer 1

You mention the classes jfx-decorator and jfx-decorator-buttons-container , but your example CSS uses the classes jfx-decorator-buttons and container . I'm unsure which classes you really want, but I'll add the two latter, since that will produce the CSS from your example.

class Styles : Stylesheet() {
    companion object {
        val jfxDecoratorButtons by cssclass()
        val container by cssclass()
    }

    init {
        jfxDecoratorButtons and container {
            backgroundColor += Color.RED
        }
    }
}

UPDATE: You changed the code in your question, so here is the updated version that will produce that output:

class Styles : Stylesheet() {
    companion object {
        val jfxDecoratorButtonsContainer by cssclass()
    }

    init {
        jfxDecoratorButtonsContainer {
            backgroundColor += Color.RED
        }
    }
}

Camel cased selectors are automatically converted to lower cased with hyphens. You can also specify the exact name inside the cssclass delegate function:

val myCssClass by cssclass("my-slightly-different-css-class")

Notice also that since the backgroundColor property accepts multiple values, you must "add" the color to the list of colors using += . This is the common pattern for all properties that accept multiple values.