[英]JavaFX- how to hide tab content area and show only tab headers on selection of specific tab
I want to provide a way for users to hide/ unhide tab pane contents without adding additional buttons to UI. 我想为用户提供一种隐藏/取消隐藏选项卡窗格内容而不向UI添加其他按钮的方法。 One way I thought was to provide a "dummy" tab in tabpane and on selecting it, all contents of tabpane will be hidden, except for headers.
我认为的一种方法是在Tabpane中提供一个“虚拟”选项卡,并在选择它时将隐藏Tabpane的所有内容(标题除外)。 On selecting any other tab, contents will be made visible again.
选择任何其他选项卡后,内容将再次变为可见。 I have tried changing min/max/pref width of tabpane.
我试过更改Tabpane的最小/最大/首选宽度。
You can simply set the max height of the TabPane
: 您可以简单地设置
TabPane
的最大高度 :
public class Main extends Application {
private static final int TABPANE_HEADER_HEIGHT = 29;
@Override
public void start(Stage primaryStage) throws Exception{
BorderPane root = new BorderPane();
// Add simple tabs
TabPane tp = new TabPane();
tp.getTabs().add(new Tab("Tab1", new Label(" Content of the first tab")));
tp.getTabs().add(new Tab("Tab2", new Label(" Content of the second tab")));
// Create the Tab which hides the content
Tab hideTab = new Tab("Hide", new Label(" Content of the third tab"));
tp.getTabs().add(hideTab);
hideTab.selectedProperty().addListener((obs, oldval, newval) ->
tp.setMaxHeight(((newval) ? TABPANE_HEADER_HEIGHT : -1)));
root.setTop(tp);
Scene scene = new Scene(root, 300, 275);
scene.getStylesheets().addAll(getClass().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Result: 结果:
Note 注意
You can do the same using CSS by adding a new pseudo-class for .tab-pane
called eg tabcontenthidden
. 您可以使用CSS通过为
.tab-pane
添加一个新的伪类(例如tabcontenthidden
。 In this pseudo class the max height of the TabPane
is the height of the tabs. 在此伪类中,
TabPane
的最大高度是选项卡的高度。
style.css style.css文件
.root { TAB_HEADER_HEIGHT: 29; }
.tab-pane:tabcontenthidden { -fx-max-height: TAB_HEADER_HEIGHT; }
.tab-pane {
-fx-max-height: -1;
-fx-background-color: orange;
}
In the Java code, you can create a PseudoClass
like 在Java代码中,您可以创建一个
PseudoClass
PseudoClass TABPANE_CONTENT_HIDDEN = PseudoClass.getPseudoClass("tabcontenthidden");
and you can activate this pseudo-class with the pseudoClassStateChanged
method: 您可以使用
pseudoClassStateChanged
方法激活此伪类:
tabPane.pseudoClassStateChanged(TABPANE_CONTENT_HIDDEN, true); // false to show
Note2 笔记2
You can add Button
s to the tab area like in this answer (one button to hide and show) which maybe more ergonomic than an additional Tab
. 您可以像此答案一样将
Button
s添加到选项卡区域(一个按钮可以隐藏和显示),它可能比附加的Tab
更符合人体工程学。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.