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

Question

p:badge当值为零或为空时，我希望我的 PrimeFaces不可见。以下将显示一个带有值的徽章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>

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

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

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

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

也可以看看

在 PrimeFaces 11 中，引入了该visible属性。它可以像这样使用：

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