Как вы устанавливаете JavaFX TabPane CSS в коде?

Question

/questions/31978963/udalit-seryij-bg-za-vkladkami-v-jfx/31978966#31978966

Я хотел бы динамически добавлять цвет фона на мою вкладку (в зависимости от определенных условий). Как я могу добиться этого из кода? Один из вариантов - назначить вкладке определенный идентификатор, с которым связан CSS, но в моем случае цвет может быть выбран пользователем динамически.

Кроме того, мне интересно, как применять стили в коде при работе с иерархией компонентов.

Answer 1

Вы можете назначить цвет фона для поиска в файле CSS:

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, my-tab-header-background ;
}

Теперь в коде вы можете установить значение искомого цвета, когда вам нужно:

tabPane.setStyle("my-tab-header-background: blue ;");

SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class DynamicTabHeaderBackground extends Application {

    private static final String TAB_HEADER_BACKGROUND_KEY = "my-tab-header-background" ;

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
        tabPane.getTabs().addAll(new Tab("Tab 1"), new Tab("Tab 2"));
        tabPane.getSelectionModel().selectedIndexProperty().addListener((obs, oldIndex, newIndex) -> {
            if (newIndex.intValue() == 0) {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
            } else {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": green ;");
            }
        });

        Scene scene = new Scene(tabPane, 400, 400);
        scene.getStylesheets().add("dynamic-tab-header.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

с dynamic-tab-header.css, содержащим код CSS выше.

Обновить

Если у вас несколько панелей вкладок, вы можете рассмотреть следующий вариант CSS-файла:

.tab-pane {
    my-tab-header-background: derive(-fx-text-box-border, 30%) ;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, 
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, my-tab-header-background) ;
}

Это в основном эмулирует поведение по умолчанию, но позволяет вам изменять фон на любой конкретной вкладке, вызывая tabPane.setStyle(...) код, как и раньше.