Comment customiser un composant TabPane en JavaFX ?

Le CSS associé avec JavaFX permet de customiser les composants UI.

Intéressons - nous au composant TabPane qui permet la gestion des onglets.

Exemple

.tab-pane *.tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, 40.0%);
    -fx-effect: innershadow(two-pass-box , rgba(0.0,0.0,0.0,0.6) , 4.0, 0.0 , 0.0 , 0.0);
}

Dans cet exemple, la couleur de fond du composant TabPane (containeur des onglets) est "déduite" d'un effet qui va être appliqué.


Le label de chaque onglet peut être aussi customisé.

Exemple

.tab-label {
-fx-font-size: 9.0pt;
}

Dans cet exemple la taille de la police est fixée à 9 points.

Nous pouvons customiser le style d'un onglet lors de sa sélection.

Exemple

.tab:selected {
-fx-text-fill: #0026FF;
}

Dans cet exemple nous "ajoutons" une couleur au texte de l'onglet sélectionné.