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

Question

我正在使用JFoenix在我的JavaFX应用程序中拥有Google材料样式的元素。 我注意到，为了使用css样式化JFoenix的元素，有些命令与仅使用JavaFX时不同，因此我无法按照自己的意愿对JFoenix的TabPane进行样式化。

目前，我的TabPane如下图所示： https://ibb.co/DtxVpJJ 我希望将这些关闭选项卡按钮的颜色更改为以下内容： https://ibb.co/yRbDGnQ 我已经尝试了很多在互联网上找到的解决方案，但没有一个能够解决问题。 主要的两个解决方案是：

• 直接更改按钮的颜色（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

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

- Xtravaganza

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。

这可以用于创建更复杂的效果，例如在选择面板时更改颜色/图标等。

- Topaco