jsf - 如何自定义 primefaces 组件的外观？

Question

如何设置 primefaces 组件的样式并指定它们在网页上的位置？非常感谢任何示例可下载应用程序的链接。

Answer 1

组件位置:

Primefaces 有一些具有位置属性的组件，例如 p:dialog :

<p:dialog header=”Header Text” widgetVar=”dialog” position=”10,50”>
 ...
</p:dialog>

在示例中，位置以与浏览器窗口左上角相关的 [x,y] 对形式给出。此处也允许使用“top”、“bottom”、“left”、“right”或“center”等值。如果省略该属性，则对话框的位置居中。

对于所有其他组件，css 定位可以使用由 style 或 styleClass 属性定义，这可用于许多 Primefaces 组件或在单独的 css 布局中定义.

以下示例为 p:dataTable 设置绝对位置:

<p:dataTable value="#{testBean.selectOptions}" var="item"
             style="position:absolute; top:50px; left:240px;">

Primefaces 甚至自带 p:layout也可用于定位的标签。

风格

这可以使用 Primefaces themes 来完成.此外，Primefaces documentation (从 2.1 版本开始你必须付费)列出了每个组件的所有 css 样式类。您可以调整它们以满足您的需要。