p: фасет панели "options" с p: menu - невозможно установить значок, отличный от значения по умолчанию "ui-icon-gear" - PullRequest
Новая
       13

p: фасет панели "options" с p: menu - невозможно установить значок, отличный от значения по умолчанию "ui-icon-gear"

0 голосов
/ 11 июня 2018

Я проверил всю документацию PrimeFaces 6.x и онлайн, а также на p: panel + facet "options" + p: menu и попробовал фасет "actions" / "header" вместе с "options", но я могуКажется, либо изменить значок справа от панели ap: с фасетом "опции" + p: меню , либо установить класс CSS для его сгенерированной ссылки привязки.

Кто-нибудь знает, как применить любой из них?

Снимок экрана № 1: Panel Menu trigger icon gear

Сгенерированный код: 

<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>

1 Ответ

0 голосов
/ 11 июня 2018

Можно начать с создания правильного селектора, который отключает значок по умолчанию (он, скорее всего, включает в себя .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>

, в которой вы можете объявитьваши собственные компоненты и значки (пометьте звездочкой и помогите в приведенном выше примере)

...