JavaFX TabPane 删除选项卡和内容之间的边框答案

【问题标题】：JavaFX TabPane remove border between Tabs and contentJavaFX TabPane 删除选项卡和内容之间的边框
【发布时间】：2021-07-11 00:23:26
【问题描述】：

我想删除 TabPane 中的选项卡与其内容之间的微小边框。此边框是headers-region 的一部分，我在下图中将其背景设为绿色。我的应用程序（下面的代码）如下所示：

标签有一个很小的绿色边框将它们与其内容分开：

但是，我希望删除选项卡及其内容之间的边框，以便选项卡看起来与它们的内容相连。我希望它看起来像以下（我通过编辑上面的图像创建的）：

这是我的应用程序的 Java 代码：

package pack;

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class TabPaneTesting extends Application {
    
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        StackPane tab1Content = new StackPane(new Circle(100));
        Tab tab1 = new Tab("Tab 1", tab1Content);
        TabPane tabPane = new TabPane(tab1, new Tab("Tab 2"));
        tabPane.getStyleClass().add("tabtester");
        tabPane.setSide(Side.LEFT);
        
        Scene scene = new Scene(new StackPane(tabPane), 600, 400);
        scene.getStylesheets().add(TabPaneTesting.class.getResource("/pack/tabstyle.css").toExternalForm());
        
        stage.setScene(scene);
        stage.show();
    }
    
}

这里是 CSS (tabstyle.css)：

.tabtester .tab-content-area {
    -fx-background-color: lightblue;
}

.tabtester .tab {
    -fx-background-color: lightblue;
}

.tabtester .tab-header-area {
    -fx-background-color: transparent;
}

.tabtester .tab-header-background {
    -fx-background-color: red;  
}

.tabtester .headers-region {
    -fx-background-color: green;
    -fx-padding: 0;
    -fx-border-color: transparent;
    -fx-border-width: 0;
}

正如您在 CSS 中看到的，我已尝试从 headers-region 中删除任何边框和填充，但这似乎不起作用。

有什么想法吗？提前致谢。

【问题讨论】：

你试过添加outline: none 吗？
@dale 注意这是 JavaFX CSS，而不是“普通”CSS。我已经编辑了标签。

标签： java javafx javafx-css

【解决方案1】：

你可以用这个css语句去掉空格：

.tabtester > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 1 2;
}

如果您只想删除选定选项卡的空间（以便用户可以区分选定的选项卡和未选定的选项卡）：

.tabtester > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-insets: 0 1 0 0, 1 2 0 1, 2 3 0 2;
}

可以找到带有原始值的modena.css e。 G。这里： https://gist.github.com/maxd/63691840fc372f22f470

【讨论】：