Question

我无法理解我应该做什么工作来完成这项任务。我试过了

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

编辑1
这就是我得到的 enter image description here

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

编辑2
当我做的时候

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

我得到： enter image description here

但我需要（对不起，这是gimp，而不是photoshop） enter image description here

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

enter image description here

如果您想操纵标签容器（标签所在的位置）本身，您需要这样：

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

enter image description here

<强>更新

所选标签的默认值为：

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

enter image description here

查看modena.css（默认JavaFX样式表）文件，了解要更改的内容的信息。

字体大小不会动态变化，您必须使用选项卡的大小/宽度/高度属性（与字体大小相关）监听字体大小。

还有很多伪标签，例如.tab：selected .tab：top等。如果你想要只有新设计的默认行为，请注意这类事情。

最后看看css选择器，你错过了降序选择器（'＆gt;'）：http://www.w3schools.com/cssref/sel_element_gt.asp

Answer 2

目前还不清楚你在寻找什么......也许

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class TabPaneStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab();
        tab1.setGraphic(new Label("tab 1"));
        Tab tab2 = new Tab();
        tab2.setGraphic(new Label("tab 2"));
        tabPane.getTabs().addAll(tab1, tab2);
        Scene scene = new Scene(tabPane);
        scene.getStylesheets().add("tab-pane-big-tabs.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

使用css文件

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

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

2 个答案: