Question

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

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

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

我试过了

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

但是这会改变子菜单中的项目。例如保存并更新。我要求标题或组名，＆＃34; Ajax Menuitems＆＃34;，＆＃34;非Ajax菜单项＆＃34;等

Answer 1

免责声明：我已经使用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 */
}

Answer 2

正如@Jasper所建议的那样，我为子菜单设置了styleClass属性并且它有效。这是我的xhtml的代码：

<div class="">
    <h:form>
        <p:panelMenu model= "#{menuBean.getModel()}" type="tiered">
        </p:panelMenu>
        <p:spacer height="10"></p:spacer>
    </h:form>

</div>

CSS：

.icon-1 > h3 > span{
    background-image: url(../resources/images/icon_1.png);
    margin: 0px 4px 0px 0px;
    width: 25px;
    height: 25px;
}

.icon-2 > h3 > span {
    background-image: url(../resources/images/icon_2.png);
    margin: 0px 4px 0px 0px;
    width: 25px;
    height: 25px;   
}

爪哇：

List<Items> list = //map of items to be added to the panelMenu with a parent-child hierarchy.
String label = "SubMenu 1";
String icon = "icon-1";

创建新的子菜单并添加styleClass：

Submenu submenu = new Submenu();
submenu.setLabel(label);
//submenu.setIcon(icon);
submenu.setStyleClass(icon);

将子菜单添加到panelMenu：

((MenuModel) container).addSubmenu(submenu);

创建一个新项目进入子菜单：

MenuItem item = new MenuItem();
item.setValue(label);
item.setTitle(label);
item.setIcon(icon);
if (container instanceof MenuModel) {
    ((MenuModel) container).addMenuItem(item);
} else if (container instanceof Submenu) {
    ((Submenu) container).getChildren().add(item);
}

结果：

这种方法比我尝试的第一种方法效果好得多。为此，我添加了一个自定义的PanelMenu渲染器，如下所述：Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu。在需要相同的图标样式类时，需要做更多的工作。

Answer 3

更改图标你有两个解决方案

第一个解决方案

您可以查看我们网站的Ui-Icon并选择您要使用的图标Icons Site

第二个解决方案

您可以使用css

使用自己的图标

.mainPageIcon {
background: url(/images/image.png) no-repeat;
height: 16px;
width: 16px;
}

<p:panelMenu style="width:300px" icon="mainPageIcon ">
 ...
</p:panelMenu >

for Java solution

MenuItem item3 = new MenuItem();
ImageIcon imageIcon = new ImageIcon(ImageIO.read(getClass().getResourceAsStream("/Project1/rawaz/new.gif")));
item3.setIcon("imageIcon");

您可以阅读更多Are user icons supported on root submenus in PrimeFaces 6.0 PanelMenu

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

3 个答案: