更改 JavaFx 选项卡默认外观 [英] 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的left padding值从10变为0.另外你需要覆盖其他CSS选择器:.tab-pane:bottom, .tab-pane:left 和 .tab-pane:right 对于 TabPane 的不同 javafx.geometry.Side 使用相同的方式.

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 选项卡默认外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！