JavaFx菜单项加速器Javafx css

时间:2016-04-12 20:42:57

标签: java javafx javafx-css

我试图将JavaFX菜单项标签图标化。我为菜单项标签和加速器标签都复制了图标。 这是一张说明我的问题的图片。

enter image description here

这是Javafx css代码:

.menu-item > .label {

}

#miRestore .label{
    -fx-graphic: url("/img/Upload_16x16.png");
}
#miBackup .label {
    -fx-graphic: url("/img/Flash%20Disk_16x16.png");
}
#miClose .label {
    -fx-graphic: url("/img/Delete_16x16.png");
}

#miSettings .label {
    -fx-graphic: url("/img/Settings_16x16.png");
}

#miRegistre . label{
    -fx-graphic: url("/img/Help_16x16.png");
}

1 个答案:

答案 0 :(得分:5)

我找到了一个可靠的解决方案: 在Scene Builder / FXML中(无论你喜欢什么), 将样式类(不是id)附加到每个菜单 - 您想要有图标的项目。 现在,在菜单栏中添加一个样式表,在其中为每个带有图标的项目放置以下CSS:

.yourClassName > .label{
    -fx-graphic: url("yourImageUrl");
}

在CSS文件的末尾,添加以下内容以删除所有第二张图片:

.context-menu .accelerator-text{
    -fx-graphic: none;
}

这样做是将每个-accelerator-text的-fx-graphic设置为'none'。所以它基本上会再次移除图像。

现在,菜单项目文本前面只有图标,而不是加速器文本。 为了让您具体了解如何完成此操作,我为您做了一个小例子: sample

这是将以下CSS样式表添加到我的菜单栏中的结果, 和相应的CSS样式类添加到我的菜单 - 项目:

.newIcon > .label{
    -fx-graphic: url("px16/file.png");
}
.openIcon > .label{
    -fx-graphic: url("px16/folderEmpty.png");
}
.closeIcon > .label{
    -fx-graphic: url("px16/minus.png");
}
.saveIcon > .label{
    -fx-graphic: url("px16/save.png");
}
.saveAsIcon > .label{
    -fx-graphic: url("px16/folder.png");
}
.quitIcon > .label{
    -fx-graphic: url("px16/error.png");
}
.context-menu .accelerator-text{
    -fx-graphic: none;
}

这是我在StackOverflow上的第一个答案,我希望这会对某人有所帮助。