29

CSS を使用して JavaFx タブのデフォルトの外観を変更しようとしています。

私は以下を達成することができました。

ここに画像の説明を入力

私が探しているのは、最初のタブにギャップを残さないことです。

誰かがそれを達成する方法について正しい方向に向けてください。

以下は、私が達成しようとしている出力です。

ここに画像の説明を入力

次のCSSを使用しました

.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;
}
4

1 に答える 1

20

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 */
}

ここで、tab-header-area の左パディング値が 10 から 0 に変更されました。さらに、他の CSS セレクターをオーバーライドする必要があり.tab-pane:bottomます.tab-pane:left:.tab-pane:rightjavafx.geometry.Side

于 2013-11-05T15:48:27.900 に答える