JavaFX 使用 JFoenix 框架更改关闭选项卡按钮颜色

Question

我正在使用 JFoenix 在我的 JavaFX 应用程序中添加 google material 类元素。我注意到为了使用 css 设置 JFoenix 元素的样式，一些命令与仅使用 JavaFX 时不同，因此我无法按照我的意愿设置 JFoenix 的 TabPane 样式。

此时我的TabPane如下图所示： https://ibb.co/DtxVpJJ

而且我想按如下方式更改那些关闭标签按钮的颜色： https://ibb.co/yRbDGnQ

我已经尝试了很多在互联网上找到的解决方案，但其中 none 能够解决问题。主要的两个解决方案是：

直接改变按钮的颜色(https://blog.samirhadzic.com/2016/08/30/close-options-for-tabpane)。
隐藏按钮并用图标替换它。 (Javafx change Tab X to image icon from url)

使用代码更改颜色，没有任何反应：

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

使用以下代码，图标出现但仍在白色默认十字后面：

.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;
}

结果：

https://ibb.co/NSmWQ3m

这似乎是一个如此简单的问题，我无法解决它。有什么想法吗？

Answer 1

例如

中 JFoenix 的 TabsDemo

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

与可关闭窗格的修改一起使用。默认如下：

关闭按钮的颜色可以更改为例如红色 css:

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

也可以使用图标。在这种情况下，css 可能是：

.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;
}

最后一节覆盖默认样式，将十字的形状、大小和颜色定义为 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);
}

TabPane-css 的蓝图可以在

中找到

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

和

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

节 JFXTabPane.

这可用于创建更复杂的效果，例如在选择窗格时更改 color/icon 等。

JavaFX 使用 JFoenix 框架更改关闭选项卡按钮颜色

JavaFX change close tab button color using JFoenix framework

css

java

javafx

jfoenix