Question

如何将图标添加到组件p：panel？

<p:panel header="text" />

不幸的是它不支持“icon”属性。所以我尝试了这个：

<f:facet name="header">
 <h:outputText value="text">
</h:outputText>
 <p:commandLink styleClass="ui-icon ui-icon-comment" />
</f:facet>

但是这会在文本和命令Link之间添加一个换行符，它只显示为一个图标。

有人知道我怎么能这样做吗？ TY

Answer 1

图标导致其下方文本向下移动的原因是ui-icon类具有display: block样式，导致图像贪婪地消耗线条并向下推文本。以下标题构面将在图像和文本周围构建一个2列表，强制标题并排显示它们。

<f:facet name="header">
  <h:panelGrid columns="2">
    <span class="ui-icon ui-icon-comment" />
    <h:outputText value="text" />
  </h:panelGrid>
</f:facet>

Answer 2

这是您可以向面板组件添加图标的方式：

<p:panel header="the header text you want">
    <f:facet name="actions">
        <p:commandLink
            styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-help" />
        </p:commandLink>
    </f:facet>
</p:panel>

将图标添加到p：面板？

2 个答案: