更改JavaFx选项卡默认Look [英] Change JavaFx Tab default Look

问题描述

我正在尝试使用css更改JavaFx标签的默认外观。

I am trying to change the default look of JavaFx tabs using css.

我设法实现了以下目标。

I managed to achieve following.

我是什么我正在寻找的是第一个标签上不应该留下差距。

What I am looking for is there should not be left gap on first tab.

有人可以指点我如何实现它。

Can somebody please point me in right direction on how to achieve it.

以下是我想要实现的输出。

Below is the output I am trying to achieve.

我使用了以下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;
}

推荐答案

你还应该覆盖CSS ：

You should also override the 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：左和 .tab-pane：right 以相同的方式用于不同的 javafx.geometry.Side s。

Here the left padding value of the tab-header-area changed from 10 to 0. In addition you need to override other CSS selectors: .tab-pane:bottom, .tab-pane:left and .tab-pane:right in the same manner for different javafx.geometry.Sides of the TabPane.

这篇关于更改JavaFx选项卡默认Look的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！