JavaFx - 增加文本和选项卡标题区域边缘之间的空间

Question

我不明白我应该用什么元素来完成这项任务。我试过了

.tab-header-area .tab{
    -fx-background-color:red;
    -fx-padding:30px;
}

编辑 1
这就是我得到的

但我在大红色矩形内有相同的选项卡标题。如何增加标签标题区域的文本和边缘之间的距离？换句话说 - 如何使用相同的字体大小使选项卡标题更大？

编辑 2
当我做的时候

.tab-header-area .tab .label{
    -fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
    -fx-background-color: red ;
}

我得到:

但我需要(抱歉，这是 gimp，不是 photoshop)

Answer 1

如果你想在选项卡(而不是标签)周围加一个边框，你必须使用这个:

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: red;
    -fx-padding: 20px;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

如果你想操纵标签容器(标签所在的地方)本身，你需要这个:

.tab-pane > .tab-header-area > .headers-region > .tab  > .tab-container{    
    -fx-border-color: black;
    -fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-padding: 20px;
    -fx-background-color: red;
}

更新

选定选项卡的默认设置是:

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}

事情是这样的:

.tab-pane > .tab-header-area > .headers-region > .tab {    
    -fx-padding: 20px;
    -fx-background-color: red;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {    
    -fx-padding: 20px;
    -fx-background-color: red;
    -fx-border-width: 1px;
    -fx-border-color: black;
}

.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
    -fx-border-width: 0px;  
}

查看 modena.css(默认 JavaFX 样式表)文件以了解有关要更改的内容的信息。

字体大小不会动态变化，您必须通过选项卡的大小/宽度/高度属性(与字体大小相关)的监听器来处理字体大小。

还有很多伪标签，例如 .tab:selected .tab:top 等。因此，如果您只想在新设计中使用默认行为，请注意此类事情。

最后看看 css 选择器，您错过了降序选择器 ('>'):http://www.w3schools.com/cssref/sel_element_gt.asp