Search code examples
javacssjavafxjfoenix

JavaFX change close tab button color using JFoenix framework

I'm using JFoenix to have google material like elements in my JavaFX application. I notice that in order to style JFoenix's elements with css, some commands are not the same as when using only JavaFX, so I'm not being able to style JFoenix's TabPane as I'd wish to.

At the moment my TabPane is as shown in the following image: https://ibb.co/DtxVpJJ

And I wish to change those close tab buttons color as follows: https://ibb.co/yRbDGnQ

I already tried a lot of solutions I found in the internet, but none of them is able solve the problem. The main two solutions were:

Using the code to change the color, nothing happens:

.jfx-tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button{
    -fx-background-color:red;
}

Using the following code, the icon appears but still behind the white default cross:

.jfx-tab-pane .tab-close-button {
    -fx-background-color: transparent;
    -fx-shape:null;
    -fx-background-image: url("../../assets/close-32.png");
    -fx-background-size: 25;
    -fx-background-repeat: no-repeat;
}

Result:

https://ibb.co/NSmWQ3m

This seems such a simple problem and I'm not being able to fix it. Any ideas?

Solution

  • As an example the TabsDemo of JFoenix in 

    JFoenix-master\demo\src\main\java\demos\components\TabsDemo.java

    is used with the modification of closeable panes. The default is as follows:

    enter image description here

    The color of the close buttons can be changed to e.g. red with the following css:

    .jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
     -fx-background-color: red;
}

    enter image description here

    Alternatively an icon can be used. In this case the css could be:

    .jfx-tab-pane .headers-region .tab .tab-container .tab-close-button {
    -fx-background-image: url(<path to icon file>);
    -fx-background-repeat: no-repeat;
}

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "";
    -jfx-size: 0;
    -fx-background-color: Transparent;
}

    enter image description here

    The last section overwrites the default style, which defines the shape, size and color of the cross as SVG:

    .jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z";
    -jfx-size: 12;
    -fx-background-color: rgba(255, 255, 255, .87);
}

    A blueprint for the TabPane-css can be found in

    JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-tab-pane.css

    and

    JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-button.css

    section JFXTabPane.

    This can be used to create more complex effects, such as changing the color/icon when selecting a pane etc.