时间戳

首页 > 解决方案 > p:panel facet "options" with p:menu - 无法设置与默认 "ui-icon-gear" 不同的图标

jsf - p:panel facet "options" with p:menu - 无法设置与默认 "ui-icon-gear" 不同的图标

问题描述

我已经检查了所有 PrimeFaces 6.x 文档和在线以及 p:panel + facet "options" + p:menu 并尝试了 facet "actions"/"header" 和 "options"，但我似乎无法要么更改ap:panel 右侧的图标，使用 facet "options" + p:menu或将 css 类设置为其生成的锚链接。

有谁知道如何申请其中任何一个？

截图#1： 面板菜单触发图标齿轮

生成的代码：

<div id="myForm:formPanel" class="ui-panel ui-widget ui-widget-content ui-corner-all templateWidgetPanel" data-widget="widget_myForm_formPanel">
   <div id="myForm:formPanel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
       <span class="ui-panel-title">Menu Test</span>
       <a id="myForm:formPanel_menu" href="#" class="ui-panel-titlebar-icon ui-corner-all ui-state-default" title="Edit...">
           <span class="ui-icon ui-icon-gear"></span>
       </a>
   </div>
   <div id="myForm:formPanel_content" class="ui-panel-content ui-widget-content">Hola!</div>
</div>

源代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html   xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Panel Menu Icon</title>
    </h:head>
    <h:body>

        <h:form id="myForm" style="width: 30%">
            <p:panel header="Menu Test"
                     id="formPanel"
                     menuTitle="Edit..."
                     styleClass="templateWidgetPanel" >
                <f:facet name="options">
                    <p:menu id="formPanelMenu" styleClass="templateWidgetMenu">
                        <p:submenu label="Options.." styleClass="templateWidgetSubMenu">
                            <p:menuitem value="Menu #1"
                                        styleClass="templateWidgetSubMenuConfigure"
                                        target="_top"
                                        outcome="index.xhtml"
                                        icon="ui-icon-settings"/>
                            <p:menuitem value="Menu #2"
                                        styleClass="templateWidgetSubMenuConfigure"
                                        target="_top"
                                        outcome="index.xhtml"
                                        icon="ui-icon-settings"/>
                        </p:submenu>
                    </p:menu>
                </f:facet>
                Hola!
            </p:panel>
        </h:form>

    </h:body>
</html>

标签： jsfprimefacesmenu

解决方案

您可以首先创建禁用默认图标（它很可能包含.ui-icon.ui-icon-gear在其中）的正确选择器，然后在此选择器中设置不同的图标。是的，它是（ab）在这种情况下使用 ui-icon-gear 类，但它有效

.templateWidgetPanel .ui-icon-gear {
    background-position: -224px -112px;
}

上面的 css（所有基本 css，没有特定的 PF）将其更改为“星”但是......

PrimeFaces 面板还可以选择向面板添加自定义操作（来自同一个展示）：

<p:panel id="custom" header="Custom Actions" style="margin-bottom:20px">
    <h:panelGrid columns="2" cellpadding="10">
            <p:graphicImage name="demo/images/godfather/godfather3.jpg" />
            <h:outputText value="After a break of more than 15 years..." />
        </h:panelGrid>

    <f:facet name="actions">
        <h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-help" />
        </h:commandLink>
        <h:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-star" />
        </h:commandLink>
    </f:facet>
</p:panel>

您可以在其中声明自己的组件和图标（上面示例中的星号和帮助）

推荐阅读