如何在值为空或为0时隐藏PrimeFaces p:badge且不影响内部组件

解决方案 #

方案1：使用官方visible属性（适用于PrimeFaces 10及以上版本）

p:badge自带专门控制徽标自身显隐的visible属性，该属性不会影响包裹的内部组件，直接按需求绑定判断表达式即可：

<p:badge value="#{bean.value}" visible="#{not empty bean.value and bean.value != 0}">
  <p:avatar label="Badge"/>
</p:badge>

表达式会在值为空或者等于0时自动隐藏徽标，内部的p:avatar等组件会正常渲染。

方案2：CSS兼容方案（适用于PrimeFaces 10以下旧版本）

如果使用的版本没有提供visible属性，可以通过条件样式类实现：

1. 给p:badge绑定动态样式类

<p:badge value="#{bean.value}" styleClass="#{empty bean.value or bean.value == 0 ? 'hide-empty-badge' : ''}">
  <p:avatar label="Badge"/>
</p:badge>

2. 加入自定义CSS规则

.hide-empty-badge .ui-badge {
    display: none !important;
}

该规则只会隐藏符合条件的徽标元素，不会影响内部组件的渲染效果。

内容的提问来源于stack exchange，提问作者Jasper de Vries