【PrimeFaces】PrimeFaces元件 CSS客製化 - Part4：PanelGrid

tags: PrimeFaces CSS

PanelGrid

調整border的方式

1. 無邊線

.noBorderPanel {
    border: none !important;
    padding: 0 !important;
}

2. 有邊線

.tableBorder td {
    border: 1px solid #10828C;
    padding: 5px;
}

• 若改用PanelGrid 和 ui:repeat 刻出DataTable，如何讓CSS的樣式和原本的DataTable一樣?
  1. xhtml

  <p:panelGrid>
      <ui:repeat var="invoiceEntity" value="#{remindList.invoiceEntityList}">
  	<p:row>
  	    <ui:repeat var="titleDetailList" value="#{invoiceEntity.titleList}">
  		<p:column>
  		    <p:commandLink/>
  		</p:column>
  	    </ui:repeat>
  	</p:row>
  	<ui:repeat var="contentList" value="#{invoiceEntity.contentList}" varStatus="contentListStatus">
  	    <ui:fragment>
  		<p:row>				
  		    <ui:repeat var="contentElement" value="#{contentList.contentElementList}">
  			<p:column styleClass="oddColumnStyle columnPadding">
  			    <p:commandLink/>
  			</p:column>
  		    </ui:repeat>
  		</p:row>
  	    </ui:fragment>
  	</ui:repeat>
      </ui:repeat>
  </p:panelGrid>
  

  2. css，寫法請參考Common
  • 調整Header的樣式

  .dataTableHeader {
  border: 1px solid #a8a8a8 !important;
  background: #c4c4c4 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0))) !important;
  font-weight: bold !important;
  color: #4f4f4f !important;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7) !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  }
  

  • 調整odd row 和 even row 的樣式 (even row 使用預設值)

  .oddColumnStyle {
  background-color: #F2F5F9 !important;
  }
  

常用預設class

Style Class	Applies
.ui-panelgrid	Main container element of panelGrid.
.ui-panelgrid-header	Header.
.ui-panelgrid-even	Even numbered rows
.ui-panelgrid-odd	Odd numbered rows

Reference 參考資料

1. PrimeFaces 5.3 官方文件：https://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf

Part5：其他元件範例

連結：【PrimeFaces】PrimeFaces元件 CSS客製化 - Part5：其他元件範例