[英]JavaFx: tab rounded corners
To make my tab corners rounded I use the following code: 为了使我的标签角变圆,我使用以下代码:
.tab {
-fx-border-radius: 10 10 0 0;
-fx-background-radius: 10 10 0 0;
}
.tab:selected .focus-indicator {
-fx-border-radius: 10 10 0 0, 10 10 0 0;
}
However, I get rather strange behaviour. 但是,我的行为很奇怪。 When new tab is created it has some extra corners which later disappear when I change focus or create new tab.
创建新标签时,它会有一些额外的角落,当我更改焦点或创建新标签时,这些角落会消失。 For example - I create the first tab.
例如 - 我创建了第一个选项卡。
Now I create the second tab. 现在我创建第二个选项卡。 The first tab is already normal, but the second has this strange corners.
第一个标签已经正常,但第二个标签有这个奇怪的角落。
I've checked on centos and win7 - behaviour is the same. 我已经检查了centos和win7 - 行为是一样的。 How to fix it?
怎么解决?
EDIT 1 编辑1
This is all my css file. 这是我的所有css文件。 The final target to make tab headers bigger with rounded corners.
最终目标是使标题标题更大,圆角。
.tab:selected .focus-indicator {
-fx-border-radius: 10 10 0 0, 10 10 0 0;
-fx-border-insets: -7 -7 -9 -8, -5 -5 -9 -6;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
-fx-border-insets: 10 10 10 10, 10 10 10 10;
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container >
.tab-label {
-fx-alignment: CENTER;
-fx-text-fill: -fx-text-base-color;
-fx-padding:0 10 0 0;
}
.tab-header-area .tab{
-fx-padding:4 10 5 10;
-fx-border-radius: 10 10 0 0;
-fx-background-radius: 10 10 0 0;
}
EDIT 2 编辑2
I've checked it on two different PC: 1(Ubuntu),2(Centoc 71 and VM Win7). 我在两台不同的PC上检查了它:1(Ubuntu),2(Centoc 71和VM Win7)。 I tried to compile with oracle jdk - result is the same.
我试着用oracle jdk编译 - 结果是一样的。
This is an already reported bug https://javafx-jira.kenai.com/browse/RT-40462 这是一个已经报道的错误https://javafx-jira.kenai.com/browse/RT-40462
UPDATE The bug has moved to the openjdk bugtracking system: 更新错误已移至openjdk错误跟踪系统:
https://bugs.openjdk.java.net/browse/JDK-8090243 https://bugs.openjdk.java.net/browse/JDK-8090243
Some of your code was redundant. 你的一些代码是多余的。 So this should work.
所以这应该工作。
.tab:selected .focus-indicator {
-fx-border-radius: 10 10 0 0, 10 10 0 0;
-fx-border-insets: -6 -9 -8 -8, -5 -8 -7 -7;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
-fx-border-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
*/
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-fx-padding:0 10 0 0;
}
.tab-header-area .tab{
-fx-padding:4 10 5 10;
-fx-background-radius: 10 10 0 0;
}
This will look like that: 这将是这样的:
UPDATE UPDATE
But if you really only want to have more radius to the rounded corners, this is all you have to do: 但是如果你真的只想要在圆角上有更多的半径,那么你需要做的就是:
.tab-pane > .tab-header-area > .headers-region > .tab {
/* if outer border should be 10 radius */
-fx-background-radius: 10 10 0 0, 9 9 0 0, 8 8 0 0;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-radius: 9 9 0 0, 8 8 0 0;
}
UPDATE UPDATE
This is what I get from your code. 这是我从你的代码中得到的。 There is a strange behaviour when adding a newly created tab.
添加新创建的选项卡时会出现奇怪的行为。 So I made a gif to show how the mouseover is working.
所以我制作了一个gif来展示鼠标悬停是如何工作的。
UPDATE UPDATE
So lets suppose that it's a bug, and you css is fine, the only solution i see for now is to remove and add default styles after some delay. 所以让我们假设这是一个错误,你css很好,我现在看到的唯一解决方案是在延迟一段时间后删除并添加默认样式。 Something like this:
像这样的东西:
Tab tab = new Tab("Tab " + (tabs.getTabs().size() + 1));
tabs.getTabs().add(tab);
new Thread(()-> {
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
Platform.runLater(()->{
tabs.getStyleClass().remove("tab-pane");
tabs.getStyleClass().add("tab-pane");
});
}).start();
Nasty hack to be honest, but it works for me: 令人讨厌的黑客说实话,但它对我有用:
它是CornerRadii
,它只是增加和减少
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.