本文介绍了JavaFX CSS:如何设置tabpane选项卡 - 宽度,高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试制作具有最小宽度和高度的标签,用于触摸屏上的手指大小,而不是文本的大小。

I am trying to make tabs that have a minimum width and height, for finger-size on a touch screen, and not the size of the text within.

.tab-pane *.tab-header-area *.tab-header-background {
  -fx-background-color:transparent;
  -fx-tab-min-width:120px;
  -fx-tab-max-width:120px;
  -fx-tab-min-height:50px;
  -fx-tab-max-height:50px;
}

.tab {
  -fx-font-family: Arial;
  -fx-font-size: 18;
  -fx-background-color:royalblue ;
}

.tab:selected {
    -fx-background-color:blue ;
}

颜色和字体有效,但尺寸无效。我尝试了许多尺寸,使用px和em,但没有效果。

The colors and font are working, but the sizes have no effect. I have tried a number of sizes, using px and em, but no effect.

    TabPane tabPane = new TabPane();

    Tab tab1 = new Tab();
    tab1.setText("Machine");
    tab1.setClosable(false);

    Tab tab2 = new Tab();
    tab2.setText("Shifts");
    tab2.setClosable(false);

    tabPane.getTabs().addAll(tab1, tab2);


推荐答案

您尝试设置的尺寸属性是。

The size properties you are trying to set are properties of the TabPane.

您使用的选择器:

.tab-pane *.tab-header-area *.tab-header-background

选择选项卡窗格的选项卡标题区域子项的选项卡标题背景子项:即 StackPane (请参阅上面链接的文档的子结构部分)。 没有定义这些属性,因此在CSS中它们没有效果。

selects the tab header background child of the tab header area child of the tab pane: that is a StackPane (see the "Substructure" section of the docs linked above). StackPane doesn't define those properties, so in your CSS they have no effect.

直接在选项卡上设置大小属性窗格:

Set the size properties directly on the tab pane:

.tab-pane *.tab-header-area *.tab-header-background {
  -fx-background-color:transparent;
}

.tab-pane {
  -fx-tab-min-width:120px;
  -fx-tab-max-width:120px;
  -fx-tab-min-height:50px;
  -fx-tab-max-height:50px;
}

.tab {
  -fx-font-family: Arial;
  -fx-font-size: 18;
  -fx-background-color:royalblue ;
}

.tab:selected {
    -fx-background-color:blue ;
}

这篇关于JavaFX CSS:如何设置tabpane选项卡 - 宽度,高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 23:11
查看更多