How do you add a split between tabpane in JavaFX?

Question

I made a vertical tabpane but am having trouble adding a horizontal line between each label.

Here is what I have:

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

Here is a picture of the result.

And I want between each label to have a horizontal line to separate them.

You will have a better chance of getting a good answer if you provide a [mcve]. — jewelsea, Oct 16 '20 at 20:38

score 1 · Answer 1 · answered Oct 16 '20 at 23:04

You can use a Separator with a little CSS styling and min and max settings on the tab width and height to achieve what you want.

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

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("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);
    }
}

For an alternative approach to tabs which uses hyperlinks and a changeable content pane (like a web page style menu system), see:

How to have menus (website style navigation links) in java desktop application

How do you add a split between tabpane in JavaFX?

1 Answers1