如何在值为空或零时隐藏徽章

How to hide a badge when the value is empty or zero

我希望我的 PrimeFaces p:badge 在值为零或空时不可见。 以下将显示值为 0 的徽章：

<p:badge value="0">
  <p:avatar label="Badge"/>
</p:badge>

如果我使用空值，将显示一个空徽章：

<p:badge value="">
  <p:avatar label="Badge"/>
</p:badge>

无法使用 rendered 属性，因为它还会隐藏徽章的内容（在本例中为 p:avatar）：

<p:badge rendered="#{bean.value ne '0'}">
  <p:avatar label="Badge"/>
</p:badge>

PrimeFaces 10

看看使用空值时呈现的HTML：

<div id="..." class="ui-overlay-badge">
  <span class="ui-badge ui-widget"></span>
  ...
</div>

您可以使用 :empty CSS 选择器简单地隐藏空元素。因此，您可以使用 CSS 隐藏空徽章，例如：

.ui-badge:empty { display: none; }

此 CSS 规则要求您使用空值才能隐藏徽章。 如果你想在值为 0 时隐藏徽章，你可以使用三元表达式将 0 映射为空：

<p:badge value="#{bean.value eq '0' ? '' : bean.value}">
  <p:avatar label="Badge"/>
</p:badge>

另见

  • How do I override default PrimeFaces CSS with custom styles?

PrimeFaces 11+

在 PrimeFaces 11 中，visible 属性是 introduced。它可以像这样使用：

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

或

<p:badge value="#{bean.value}" visible="#{bean.value ne '0'}">
  <p:avatar label="Badge"/>
</p:badge>