JavaFX TabPane 删除选项卡和内容之间的边框
JavaFX TabPane remove border between Tabs and content
我想删除 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
中删除任何边框和填充,但这似乎不起作用。
有什么想法吗?提前致谢。
您可以使用此 css 语句删除 space:
.tabtester > .tab-header-area > .headers-region > .tab {
-fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 1 2;
}
如果您只想删除选定选项卡的 space(以便用户可以区分选定和未选定的选项卡):
.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
我想删除 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
中删除任何边框和填充,但这似乎不起作用。
有什么想法吗?提前致谢。
您可以使用此 css 语句删除 space:
.tabtester > .tab-header-area > .headers-region > .tab {
-fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 1 2;
}
如果您只想删除选定选项卡的 space(以便用户可以区分选定和未选定的选项卡):
.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