如何在选项卡的右侧显示关闭按钮

Question

As you can see currently the close button is at the top.

How can i place it on the right hand side ?

public class TabbedPaneTest extends Application
{
  @Override
  public void start(Stage primaryStage)
  {
    primaryStage.setTitle("TabPane Test");

    TabPane tabPane = new TabPane();
    tabPane.setStyle("-fx-tab-min-height: 100");
    tabPane.setRotateGraphic(true);
    tabPane.setTabClosingPolicy(TabClosingPolicy.ALL_TABS);

    tabPane.getTabs().addAll(tab("Tab 1"), tab("Tab 2"));
    tabPane.setSide(Side.LEFT);

    primaryStage.setScene(new Scene(tabPane, 400, 200));
    primaryStage.show();
  }

  static Tab tab(String labelText)
  {
    Tab tab = new Tab();
    Label label = new Label(labelText);
    label.setRotate(90);
    tab.setGraphic(new StackPane(label));
    tab.setContent(new Label("       " + labelText + " content"));
    return tab;
  }

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

Answer 1

This will be a little bit hacky.

Based on the CSS reference of TabPane and the source code of TabPaneSkin : a Tab contains a StackPane that contains a Label , the close Button and the focus indicator. This StackPane has the style class tab-container .

So you can rotate this StackPane in CSS:

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container {
   -fx-rotate:90;
}

After rotating the StackPane I have noticed, that the focus indicator is handled differently, so that one must be also rotated (it has the style class focus-indicator ).

.tab-pane > .tab-header-area > .headers-region > .tab * .focus-indicator {
   -fx-rotate:-90;
}

An example , that the same as yours, just the style-sheet is added, and the Label on the Tab is not rotated anymore:

public class TabbedPaneTest extends Application {
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("TabPane Test");

        TabPane tabPane = new TabPane();
        tabPane.setStyle("-fx-tab-min-height: 100");
        tabPane.setRotateGraphic(true);
        tabPane.setTabClosingPolicy(TabClosingPolicy.ALL_TABS);

        tabPane.getTabs().addAll(tab("Tab 1"), tab("Tab 2"));
        tabPane.setSide(Side.LEFT);

        Scene scene = new Scene(tabPane, 400, 200);
        scene.getStylesheets().add(getClass().getResource("application.css").toString());

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    static Tab tab(String labelText) {
        Tab tab = new Tab();
        Label label = new Label(labelText);

        tab.setGraphic(new StackPane(label));
        tab.setContent(new Label("       " + labelText + " content"));
        return tab;
    }

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

But you can also use this approach without using a graphic on the Tab :

static Tab tab(String labelText) {
    Tab tab = new Tab(labelText);
    tab.setContent(new Label("       " + labelText + " content"));
    return tab;
}

This will produce a TabPane like on the picture: