问题

我创建了一个垂直的标签面板，但在每个标签之间添加水平线方面遇到了问题。

这是我的代码：

.tab *.tab-label {
    -fx-rotate: 90;
}

.tab {
    -fx-padding: 3em 0.5em;
}

.tab-pane .tab-header-area .tab {
    -fx-pref-height: 140;
    -fx-pref-width: 50;
    -fx-background-color: transparent;
}

这是结果的图片。

我希望在每个标签之间有一条水平线来分隔它们。

.tab *.tab-label {
    -fx-rotate: 90;
}

.tab {
    -fx-padding: 3em 0.5em;
}

.tab-pane .tab-header-area .tab {
    -fx-pref-height: 140;
    -fx-pref-width: 50;
    -fx-background-color: transparent;
}

答案1

得分: 1

您可以使用[`Separator`][1]，结合一些CSS样式以及在选项卡的宽度和高度上设置最小值和最大值，来实现您想要的效果。

[![图片][2]][2]

*no-tab-background.css*

    .tab-pane .tab-header-area .tab {
        -fx-font-size: 20px;
        -fx-pref-height: 140;
        -fx-pref-width: 50;
        -fx-background-color: transparent;
        -fx-text-box-border: 紫色;
    }

*ShowTabs.java*

    package com.test.demo;

    import javafx.application.Application;
    import javafx.geometry.*;
    import javafx.scene.Scene;
    import javafx.scene.control.*;
    import javafx.scene.layout.*;
    import javafx.stage.Stage;
    
    public class ShowTabs extends Application {
    
        @Override
        public void start(Stage stage) throws Exception {
            TabPane tabPane = new TabPane();
    
            tabPane.setSide(Side.LEFT);
            tabPane.setTabMinWidth(20);
            tabPane.setTabMaxWidth(20);
            tabPane.setTabMinHeight(100);
            tabPane.setTabMaxHeight(100);
            tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);
            tabPane.getTabs().addAll(
                    makeTab("打开", "柠檬绸缎色"),
                    makeTab("关闭", "矢车菊蓝色"),
                    makeTab("存款", "浅粉红色"),
                    makeTab("取款", "珊瑚色"),
                    makeTab("显示", "军校蓝色")
            );
    
            tabPane.getStylesheets().add(
                    ShowTabs.class.getResource("no-tab-background.css").toExternalForm()
            );
    
            Scene scene = new Scene(new StackPane(tabPane));
            stage.setScene(scene);
            stage.show();
        }
    
        private Tab makeTab(String text, String background) {
            Tab tab = new Tab();
    
            Label label = new Label(text);
    
            Separator separator = new Separator();
            separator.setPadding(new Insets(0, 0, 10, 0));
    
            VBox tabHeaderLayout = new VBox(label, separator);
            tabHeaderLayout.setSpacing(5);
            tabHeaderLayout.setAlignment(Pos.CENTER);
            tabHeaderLayout.setMinWidth(Control.USE_PREF_SIZE);
            tabHeaderLayout.setPrefWidth(120);
            tabHeaderLayout.setMaxWidth(Control.USE_PREF_SIZE);
    
            Pane content = new Pane();
            content.setPrefSize(300, 300);
            content.setStyle("-fx-background-color: " + background + ";");
    
            tab.setGraphic(tabHeaderLayout);
            tab.setContent(content);
    
            return tab;
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    }

作为选项卡的替代方法，可以使用超链接和可更改的内容窗格（类似于网页样式的菜单系统），参见：

 * https://stackoverflow.com/questions/13556637/how-to-have-menus-website-style-navigation-links-in-java-desktop-application

  [1]: https://openjfx.io/javadoc/15/javafx.controls/javafx/scene/control/Separator.html
  [2]: https://i.stack.imgur.com/uhogv.png

.tab-pane .tab-header-area .tab {
    -fx-font-size: 20px;
    -fx-pref-height: 140;
    -fx-pref-width: 50;
    -fx-background-color: transparent;
    -fx-text-box-border: purple;
}

package com.test.demo;

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class ShowTabs extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        TabPane tabPane = new TabPane();

        tabPane.setSide(Side.LEFT);
        tabPane.setTabMinWidth(20);
        tabPane.setTabMaxWidth(20);
        tabPane.setTabMinHeight(100);
        tabPane.setTabMaxHeight(100);
        tabPane.setTabClosingPolicy(TabPane.TabClosingPolicy.UNAVAILABLE);
        tabPane.getTabs().addAll(
                makeTab("Open", "lemonchiffon"),
                makeTab("Close", "cornflowerblue"),
                makeTab("Deposit", "lightpink"),
                makeTab("Withdraw", "coral"),
                makeTab("Display", "cadetblue")
        );

        tabPane.getStylesheets().add(
                ShowTabs.class.getResource("no-tab-background.css").toExternalForm()
        );

        Scene scene = new Scene(new StackPane(tabPane));
        stage.setScene(scene);
        stage.show();
    }

    private Tab makeTab(String text, String background) {
        Tab tab = new Tab();

        Label label = new Label(text);

        Separator separator = new Separator();
        separator.setPadding(new Insets(0, 0, 10, 0));

        VBox tabHeaderLayout = new VBox(label, separator);
        tabHeaderLayout.setSpacing(5);
        tabHeaderLayout.setAlignment(Pos.CENTER);
        tabHeaderLayout.setMinWidth(Control.USE_PREF_SIZE);
        tabHeaderLayout.setPrefWidth(120);
        tabHeaderLayout.setMaxWidth(Control.USE_PREF_SIZE);

        Pane content = new Pane();
        content.setPrefSize(300, 300);
        content.setStyle("-fx-background-color: " + background + ";");

        tab.setGraphic(tabHeaderLayout);
        tab.setContent(content);

        return tab;
    }

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