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

Question

我希望我的 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>

Answer 1

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>