JavaFX选项卡文本和大小问题

时间:2018-06-05 04:17:24

标签: css javafx tabs

目前在JavaFX和CSS样式表方面存在一些问题。我希望选定的标签文本为黑色,并将未选中的标签设为白色。我能够将活动标签的背景颜色变成比其他标签更深的蓝色,但在标签周围仍然有一个尴尬的区域。

以下是首次打开时的应用: 首次公开赛 enter image description here

点击选项卡时,这是应用程序: 首先点击 enter image description here

在第二张图像上,文本在背景颜色中完全丢失。如果你能帮助我摆脱标签本身周围的空间,那也是很棒的!

这是我的CSS文件:



/*main.css*/

/*set individual tab properties*/
.tab {
    -fx-background-color: #1c6fb8;
    -fx-font: 16px "Helvetica Neue" ;
    -fx-background-radius: 0;
}

.tab-label {
    -fx-text-fill: #fff;
}

.tab:focused .tab-label {
    -fx-text-fill: #000;
}

.tab-header-background {
    -fx-background-color: #1c6fb8;
}

.tab-pane {
    -fx-tab-min-width:120px;
    -fx-tab-max-width:120px;
    -fx-tab-min-height:50px;
    -fx-tab-max-height:50px;
    -fx-background-color: #15558c;
}

.tab:selected {
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-background-color: #15558c;
}




提前致谢!

1 个答案:

答案 0 :(得分:1)

  

密码:

.tab-pane .tab:selected
{
    -fx-background-color: #15558c;
}

.tab:selected .tab-label 
{ 
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}
  

完整代码:

.tab {
    -fx-background-color: #1c6fb8;
    -fx-font: 16px "Helvetica Neue" ;
    -fx-background-radius: 0;
}

.tab-label {
    -fx-text-fill: #fff;
}

.tab:focused .tab-label {
    -fx-text-fill: #000;
}

.tab-header-background {
    -fx-background-color: #1c6fb8;
}

.tab-pane {
    -fx-tab-min-width:120px;
    -fx-tab-max-width:120px;
    -fx-tab-min-height:50px;
    -fx-tab-max-height:50px;
    -fx-background-color: #15558c;
}

/*.tab:selected {
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}*/

.tab-pane .tab:selected
{
    -fx-background-color: #15558c;
}

.tab:selected .tab-label { 
    -fx-text-fill: #000;
    -fx-background-color: #15558c;
}
  

首次开放:

First Open

  

首先点击:

enter image description here

豫ICP备18024241号-1