面板的错误消息样式 [英] Error Message Style For a Panel

问题描述

我使用的是PrimeFaces，而PrimeFaces依次使用 JQuery UI 来实现其功能，并使用其CSS样式框架.这个问题源于我对CSS框架的无知，我一直找不到任何示例或文档来指导我.

I am using PrimeFaces, which in turn uses JQuery UI for not only the functionality but its CSS styling framework. This question arises from my ignorance about the CSS framework, and I have been unable to find any examples or documentation to guide me.

我想要做的是使用主题样式来为我自己的面板显示错误消息.像这样:

What I want to do is use the Theme's style for error messages for my own panel. Something like this:

<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>

我希望它看起来与使用时出现的错误消息相似.任何指针，不胜感激.

I want it to looks similar to the error message you would get when using . Any pointers much appreciated.

推荐答案

最简单的方法是查看素面

the easiest way to do this is to look at primefaces showcase, and use firebug to look at css classes.

我认为您应该将p:outputPanel与layout ="block"而不是p:panel一起使用，因为面板具有自己的样式.相反，具有块布局的outputPanel会呈现没有样式的div.

I think you should use p:outputPanel with layout="block" instead of p:panel, because the panel has its own styles. Instead, the outputPanel with block layouts renders a div with no styles.

无论如何，这就是您的代码的外观

Anyway, this is how your code should look like

<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>

这篇关于面板的错误消息样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！