如何更改PrimeFaces子菜单默认图标

debugcn 发表于 Dev

用户名

在PF 3.5的panelMenu中的子菜单名称区域中添加自己的自定义图标的方法是什么？

这是官方文档网页上给出的示例：

我必须删除小箭头，并用其他图像替换它们。到目前为止，我已经了解到箭头是由primefaces.js（位于PF JAR文件中）放置的。通过java替换它们的方法是什么？当我生成动态菜单时，不是静态菜单。我想要这样的东西：

我试过了

MenuItem item = new MenuItem();
item.setIcon("ui-icon-print");

但这会更改子菜单中的项目。例如，保存并更新。我要输入标题或组名，例如“ Ajax Menuitems”，“ Non-Ajax Menuitem”等。

贾斯珀·德弗里斯

免责声明：我已经使用PrimeFaces 6.0对此进行了测试，但是很可能也可以在3.5上使用。

（我认为）最简单的方法是使用CSS。如果使用浏览器调试工具检查箭头，您会发现图像来自特定位置的背景精灵。

要创建更具体的规则来设置图标，最好在子菜单中添加样式类：

<p:submenu label="Ajax Menuitems" styleClass="myIcon">

或在Java中：

DefaultSubMenu defaultSubMenu = new DefaultSubMenu("Ajax Menuitems");
defaultSubMenu.setStyleClass("myIcon");

现在，您可以使用该类来创建CSS规则（假设您已经创建了一个精灵）：

.myIcon .ui-icon.ui-icon-triangle-1-e {
    background-image: url('pathToYourSprite.svg');
    background-position: 0 0; /* closed position */
}
.myIcon .ui-icon.ui-icon-triangle-1-s {
    background-image: url('pathToYourSprite.svg');
    background-position: 0 0; /* opened position */
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。