CODEWITHSUNDEEP
cssjavafxkotlintornadofx
matthjes
matthjes

Reputation: 729

TornadoFX: Type-Safe CSS with other libraries

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?

Upvotes: 1

Views: 906

Answers (1)

Edvin Syse
Edvin Syse

Reputation: 7297

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.

Upvotes: 2

Related Questions