PrimeFaces咆哮动态变色

Question

有没有办法动态改变PrimeFaces咆哮组件的背景？我希望能够在出现错误时显示红色背景,并在成功时显示绿色背景.

提前致谢.

Answer 1

只有在一次只向上下文添加一条消息时,上述解决方案才有效.如果添加多条消息,则所有增长项将按最后一条消息的严重性着色.请点击以下链接,了解有关该问题的详细信息.

(土耳其语内容,您可能需要翻译它)
动态更改PrimeFaces咆哮背景颜色

为了解决这个问题,你应该通过图标样式找到growl项目(PrimeFaces只更改不同严重性级别的growl图标),并将自定义样式表类添加到growl图标的html元素的grand-parent,以实现不同的背景颜色.

首先定义下面的脚本(将自定义css类添加到祖父项):

<script>
   function init () { 
      $(".ui-growl-image-info").parent().parent().addClass("g-info");
      $(".ui-growl-image-warn").parent().parent().addClass("g-warn");
      $(".ui-growl-image-error").parent().parent().addClass("g-error");
      $(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
   }
</script>

并将以下样式定义添加到您的页面:

<style>
    div[id="growlForm:growl_container"] > div[class~="g-fatal"] {
    background-color: black !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-error"] {
    background-color: red !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-warn"]{
    background-color: orange !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-info"]{
    background-color: green !important;
    }

    .ui-growl-image-info ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-error ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-warn ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-fatal ~ .ui-growl-message {
    color:#fff;
    }
 </style>

最后,将init()方法附加到向上下文添加消息的元素.

<p:commandButton value="Show" actionListener="#{someBean.someMethod}" oncomplete="init();"/>

结果就是:)

项目源代码

希望这可以帮助任何人.

Answer 2

<style>
        div[id="forma:growl-error_container"] > div {
            background-color: red !important;
        }
        div[id="forma:growl-success_container"] > div{
            background-color: green !important;
        }
    </style>
    <h:form id="forma">           
        <p:growl id="growl-error" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 2}"/> 
        <p:growl id="growl-success" showDetail="true" sticky="true" rendered="#{facesContext.maximumSeverity.ordinal eq 0}"/> 
        <p:panel header="Growl">  
            <h:panelGrid columns="2" cellpadding="5">  
                <p:outputLabel for="msg" value="Message:"/>   
                <p:inputText id="msg" value="#{growlView.message}" required="true" />  
            </h:panelGrid>  

            <p:commandButton value="Save" actionListener="#{growlView.saveMessage}" update="@form" />  
        </p:panel>     
    </h:form> 

这是用于演示的代码组.