css - 不显示 float TabPane 的样式

Question

尝试通过添加 CSS 文件来自定义 float TabPane，如下例所示。新样式不会仅出现在 float 选项卡 Pane 中 - 对于常规 Pane ，样式会按预期出现。

public class FloatingTabPaneTest extends Application
{
  public static void main(String[] args)
  {
    Application.launch(args);
  }

  @Override
  public void start(Stage stage)
  {
    Parent root = createContentPane();
    root.getStylesheets().add(getClass().getResource("/floatingTabPane.css").toExternalForm());        
    Scene scene = new Scene(root, 1000, 800);    
    stage.setScene(scene);

    stage.setTitle(getClass().getSimpleName());
    stage.show();
  }

  private Parent createContentPane()
  {
    TabPane tabPane = new TabPane();
    tabPane.getStyleClass().add(TabPane.STYLE_CLASS_FLOATING);

    addTab(tabPane, "Tab 1", new StackPane());
    addTab(tabPane, "Tab 2", new StackPane());
    addTab(tabPane, "Tab 3", new StackPane());
    tabPane.getSelectionModel().selectLast();

    return new BorderPane(tabPane);
  }

  private void addTab(TabPane tabPane, String name, Node content)
  {
    Tab tab = new Tab();
    tab.setText(name);
    tab.setContent(content);
    tabPane.getTabs().add(tab);    
  }  
}

FloatingTabPane.css:

    .tab-pane.floating > .tab-header-area > .tab-header-background {
    -fx-border-color: red;
    -fx-border-width: 2;
    -fx-background-color: cyan;
}

Answer 1

这很有趣。问题是因为 headerBackground 可见性设置为 false，如果您使用 FLOATING 样式类。

如果你在里面搜索TabPaneSkin ，你会发现:

if (isFloatingStyleClass()) {
     headerBackground.setVisible(false); // <---- Imp part
} else {
     headerBackground.resize(snapSize(getWidth()), snapSize(getHeight()));
     headerBackground.setVisible(true);
}

由于它的可见性设置为 false，您最好的办法是在 tab-header-area 而不是 tab-header-background 上进行更改

.tab-pane.floating > .tab-header-area {
    -fx-border-color: red;
    -fx-border-width: 2;
    -fx-background-color: cyan;
}

这会在选项卡上留下一条细红线，但这总比没有样式要好 ;)