web-dev-qa-db-fra.com

Modifier l'apparence par défaut de l'onglet JavaFx

J'essaie de changer l'apparence par défaut des onglets JavaFx à l'aide de CSS.

J'ai réussi à atteindre les objectifs suivants.

enter image description here

Ce que je recherche, c'est qu'il ne devrait pas y avoir de vide sur le premier onglet.

Quelqu'un peut-il m'indiquer dans la bonne direction comment y parvenir?.

Voici le résultat que j'essaie d'atteindre.

enter image description here

J'ai utilisé le CSS suivant

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
    -fx-background-color: #e6e6e6;

}

.tab-pane .tab:selected
{
    -fx-background-color: #3c3c3c;
}

.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #828282;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #96b946;
}
tabsjavafx
21
Vipul Shah

Vous devez également remplacer le CSS:

.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
 /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

Ici, la valeur de remplissage gauche de la zone d'en-tête de tabulation est passée de 10 à 0. De plus, vous devez remplacer les autres sélecteurs CSS: .tab-pane:bottom, .tab-pane:left et .tab-pane:right de la même manière pour différents javafx.geometry.Sides du TabPane.

15
Uluk Biy