How to hide the TabBar in TabPane?
Using a TabPane
with hidden tabs as a wizard-type interface is an interesting idea, which I hadn't thought of and think I like.
You can hide the tabs with the following in an external CSS file:
.tab-pane {
-fx-tab-max-height: 0 ;
}
.tab-pane .tab-header-area {
visibility: hidden ;
}
Here's a SSCCE. In this I gave the tab pane the CSS class wizard
.
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class TabPaneAsWizard extends Application {
@Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
tabPane.getStyleClass().add("wizard");
for (int i = 1; i<=10; i++) {
tabPane.getTabs().add(createTab(i));
}
Button previous = new Button("Previous");
previous.setOnAction(e ->
tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1));
previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0));
Button next = new Button("Next");
next.setOnAction(e ->
tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1));
next.disableProperty().bind(
tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
Bindings.size(tabPane.getTabs()).subtract(1)));
HBox buttons = new HBox(20, previous, next);
buttons.setAlignment(Pos.CENTER);
BorderPane root = new BorderPane(tabPane, null, null, buttons, null);
Scene scene = new Scene(root, 600, 600);
scene.getStylesheets().add("tab-pane-as-wizard.css");
primaryStage.setScene(scene);
primaryStage.show();
}
private Tab createTab(int id) {
Tab tab = new Tab();
Label label = new Label("This is step "+id);
tab.setContent(label);
return tab ;
}
public static void main(String[] args) {
launch(args);
}
}
tab-pane-as-wizard.css:
.wizard {
-fx-tab-max-height: 0 ;
}
.wizard .tab-header-area {
visibility: hidden ;
}