PrimeFaces growl 动态改变颜色

Question

有没有办法动态改变 PrimeFaces growl 组件的背景？
我希望能够在错误时显示红色背景，成功时显示绿色背景。

提前致谢。

Answer 1

仅当您一次仅向上下文添加一条消息时，上述解决方案才有效。如果您添加多条消息，则所有 growl 项都将按最后一条消息的严重性着色。请点击以下链接了解有关该问题的更多详细信息。

(土耳其语内容，您可能需要翻译)
Change PrimeFaces growl background color dynamically

为了解决这个问题，你应该通过图标样式找到 growl 项(PrimeFaces只改变不同严重程度的 growl 图标)，并在 growl 图标的html元素的祖父级添加自定义样式表类，以实现不同的背景颜色.

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

<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();"/>

结果是:)



Source Code of the Project

希望这可以帮助任何人。