如何自定义外观素面组件的感觉? [英] How to customize the look & feel of primefaces components?

问题描述

我该如何为primefaces组件和样式设置样式?指定其在网页上的位置?链接到任何示例可下载应用程序的链接将受到高度赞赏.

How do I style a primefaces components & specify their positions on web pages ? Links to any sample downloadable application would be highly appreciated.

推荐答案

组件位置:

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

Primefaces has some components that have position attribute(s) such as p:dialog:

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

在此示例中，位置以与浏览器窗口左上角相关的[x，y]对给出.此处还允许使用"top"，"bottom"，"left"，"right"或"center"之类的值.如果省略该属性，则对话框的位置居中.

In the example the position is given as [x,y] pair related to the top left corner of the browser window. Values such as "top", "bottom", "left", "right" or "center" are also allowed here. If the attribute is omitted, the position of a dialog is centered.

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

For all other components css positioning can be use either defined by the style or styleClass attribute which is available for a lot of Primefaces components or defined in a separate css layout.

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

The following example sets an absolute position for the p:dataTable:

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

Primefaces甚至带有自己的 p:layout 标签，该标签也可以用于定位.

Primefaces even comes with an own p:layout tag that can be used for positioning as well.

样式

这可以通过 Primefaces主题来实现.此外， Primefaces文档(自2.1版开始，您必须付费)列出了每个组件的所有css样式类.您可以根据需要调整它们.

This can be accomplished using Primefaces themes. Furthermore, the Primefaces documentation (you have to pay for since version 2.1) lists all css style classes for each component. You can adapt them to fit your needs.

这篇关于如何自定义外观素面组件的感觉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！