JavaFX使用JFoenix框架更改關閉選項卡按鈕顏色

Question

我正在使用JFoenix在我的JavaFX應用程序中使用谷歌材料。 我注意到為了用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將Tab X更改為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

以TabsDemo的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 。

這可用於創建更復雜的效果，例如在選擇窗格時更改顏色/圖標等。