【PrimeFaces】如何單純使用放大版的icon

tags: PrimeFaces

Common 目的

1. 主要目標是不使用 GraphicImage 該元件，因為該元件的屬性還需要使用到後端的資料轉換
   • 屬性 value：Binary data to stream or context relative path
2. 因此改用 CommandLink 簡單的使用來單純顯示、並放大 icon
3. 不使用 CommandButton 的原因是該元件本身已經有固定的範圍，會限制住 icon 顯示的大小

Code 程式碼

1. 屬性 disabled：true，因為只是要icon的模樣，所以要把link關閉
2. 加入 Font Awesome 的icon
   • 基本語法：fa "icon名稱"
   • 放大：fa-2x through fa-10x

<p:commandLink disabled="true">
    <i class="fa fa-circle fa-2x"></i>
</p:commandLink>

Example 範例

1. styleClass：這樣寫是為了隨著後端資料的不同改變css style
2. rendered：這樣寫是為了若後端沒有資料 (null) ，則不顯示 icon

<p:commandLink id="circle" disabled="true"
styleClass="#{contentElement.stateCssClass}"
rendered="#{contentElement.stateCssClass != null}">
<i class="fa fa-circle fa-2x"></i>
</p:commandLink>

結果呈現

Reference 參考資料

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf
2. Font Awesome icon：https://fontawesome.com/