jsf - Primefaces NotificationBar 关闭图标不可见

Question

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

我使用的 pf 版本是 6.2

Answer 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).hide() .

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

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