Primefaces NotificationBar 关闭图标不可见答案

【问题标题】：Primefaces NotificationBar close icon not visiblePrimefaces NotificationBar 关闭图标不可见
【发布时间】：2021-10-06 15:26:24
【问题描述】：

在primefaces的文档中说“注意notificationBar有一个默认的内置关闭图标来隐藏内容。”。但到目前为止我无法显示它？显示关闭图标是否需要特殊属性或方面？

我使用的pf版本是6.2

【问题讨论】：

<p:notificationBar 的所有内容都是您的内容。 primefaces 没有机会放置图标。
@Holger 我同意并亲自测试了这一点。但是文档不同意:)

标签： jsf primefaces notification-bar

【解决方案1】：

如果您在 Primefaces 库中看到 notification.js 资源，您可以看到他们考虑为关闭图标提供“隐藏功能”：

primefaces-6_2\src\main\resources\META-INF\resources\primefaces\notificationbar\notificationbar.js =>

 /**
 * PrimeFaces NotificationBar Widget
 */
PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        
        var _self = this;
    
        //relocate
        this.jq.css(this.cfg.position, '0').appendTo($('body'));

        //display initially
        if(this.cfg.autoDisplay) {
            $(this.jq).css('display','block')
        }

        //bind events
        this.jq.children('.ui-notificationbar-close').click(function() {
            _self.hide();
        });
    },

所以，考虑到前面的代码，如果子组件有 ui-notificationbar-close 类并且您点击它，NotificationBar 组件将被隐藏调用自动隐藏函数（无需使用 PF(widgetVar).隐藏（）。

我已经用以下代码进行了测试，实际上，单击关闭图标后通知栏消失了：

   <p:notificationBar id="notificationBar" position="top" effect="slide" styleClass="top" widgetVar="myNotificationBarWV" autoDisplay="false">
          <i class="ui-icon ui-icon-closethick ui-notificationbar-close"></i>
            <h:outputText value="You Rock!" style="font-size:1.5 rem;"/>
        </p:notificationBar>

【讨论】：

感谢@ivasanpag 我认为它会自动呈现关闭图标，但似乎是手动放置 标记以获得关闭图标。我会测试一下，然后告诉你结果！