Question

我使用的是PrimeFaces，它不仅使用JQuery UI来实现功能，还使用了CSS样式框架。这个问题源于我对CSS框架的无知，我一直无法找到任何示例或文档来指导我。

我想要做的是将Theme的样式用于我自己的面板的错误消息。像这样：

<p:panel rendered="#{bean.someError}"  styleClass="?? what goes here ??">
    <h:outputText styleClass="?? what goes here ??"
         value="Error!  A parameter to this page is wrong so it can't be rendered.  This
                is probably because you used a stale bookmark." />
</p:panel>

我希望它看起来与使用时会出现的错误消息类似。任何指针都非常赞赏。

Answer 1

最简单的方法是查看primefaces showcase，并使用firebug查看css类。

我认为你应该使用p:outputPanel和layout =“block”而不是p:panel，因为面板有自己的样式。相反，带有块布局的outputPanel呈现没有样式的div。

无论如何，这就是你的代码应该是什么样子

<p:outputPanel rendered="#{bean.someError}" layout="block" styleClass="ui-messages ui-widget">
     <div class="ui-messages-error ui-corner-all">
         <span class="ui-messages-error-icon"></span>
         <ul>
            <li>
                <span class="ui-messages-error-summary">
                    <h:outputText value="Error!  A parameter to this page is wrong so it can't
                                         be rendered.  This is probably because you used a
                                         stale bookmark." />

                </span>
           </li>
        </ul>
    </div>
</p:outputPanel>

Answer 2

对于单个消息，它足以拥有：

<div class="ui-message-error ui-corner-all">
      <span class="ui-message-error-icon"/>
      <span class="ui-message-error-detail">your message here</span>
</div>

在Daman的回答中，它的标签少了一点。

面板的错误消息样式

2 个答案: