如何更改PrimeFaces子菜单默认图标 [英] How to change PrimeFaces submenu default icons

问题描述

将自己的自定义图标添加到

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

我尝试过

  MenuItem item = new MenuItem（）; 
 item.setIcon（ui-icon-print）; 
  

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

解决方案

我已经测试了这个与PrimeFaces 6.0，但这很可能也适用于3.5。

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

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

 < p：submenu label =Ajax MenuitemsstyleClass = 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; / *关闭位置* / 
} 
 .myIcon .ui-icon.ui-icon-triangle-1-s {
 background-image：url（'pathToYourSprite.svg'）; 
 background-position：0 0; / *已开仓位* / 
} 
  

What is the method of adding my own custom icons to the submenu name area in a panelMenu in PF 3.5?

This is the example given on the official documentation web page:

I have to remove the small arrows and replace them with other images. So far, I have understood that the arrows are placed by the primefaces.js (which comes in the PF JAR file). What is the method of replacing them through java? As I am generating a dynamic menu, not a static one. I would like something like this:

I have tried

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

But this changes it for the items INSIDE the submenu. e.g. Save and Update. I am asking for the headings or group names, "Ajax Menuitems", "Non-Ajax Menuitem" etc.

解决方案

Disclaimer: I've tested this with PrimeFaces 6.0, but this will most likely also work with 3.5.

The easiest way to do so (in my opinion) is using CSS. If you inspect the arrow using your browsers debugging tools you will find that the image comes from a background sprite at a specific position.

To create a more specific rule to set your icon it's best to add a style class to your submenu:

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

or in Java:

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

Now you can use that class to create your CSS rules (assuming you've created a sprite):

.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 */
}

这篇关于如何更改PrimeFaces子菜单默认图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！