將圖標添加到p：面板？

我該如何將圖標添加到組件p：面板？將圖標添加到p：面板？

<p:panel header="text" />

不幸的是，它不支持「圖標」屬性。所以，我想這一點：

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

但是，這增加了文本和命令鏈接只顯示爲一個圖標之間斷行。

有人知道我該怎麼辦？ TY

來源

2012-02-29 membersound

你有沒有試圖改變風格面板本身？我的意思是，使用定義圖像作爲背景的自定義類？ – Andre 2012-02-29 17:42:58

原因圖標下面導致它向下移動文本是因爲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>

來源

2012-02-29 18:32:21

ty你的提示！這並不壞，但它爲標題欄增加了非常多的空間。幾乎是沒有電網的2倍。我認爲網格不知何故需要很多空間。但是隨着你的提示，我只是覆蓋了ui-icon的顯示樣式，比如'style =「display：inline-block;'和voila，它的工作原理！ – membersound 2012-02-29 21:42:53

@membersound這是一種更乾淨的方式來做同樣的事情。。 – 2012-02-29 23:47:30

這是你可以添加一個圖標到面板組件的方式：

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

來源

2015-06-02 14:34:07

將圖標添加到p：面板？

回答

相關問題