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

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>