Question

正如您所看到的，关闭按钮位于顶部。

我怎样才能把它放在右手边？

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

这将是一个有点hacky。

基于TabPane的{{3}}和TabPaneSkin的源代码：Tab包含StackPane，其中包含Label，关闭Button和焦点指标。此StackPane具有样式类tab-container。

因此，您可以在CSS中旋转此StackPane：

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

旋转我注意到的StackPane之后，焦点指示符的处理方式不同，因此必须旋转焦点指示符（它具有样式类focus-indicator）。

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

示例，与您的相同，只添加了样式表，Label上的Tab不再轮播：

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

但您也可以使用此方法而不使用Tab上的图形：

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

这会在图片上生成TabPane：

CSS reference

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

1 个答案: