Jsf PrimeFaces<；p:steps组件'；s样式未按预期显示_Jsf_Primefaces

Jsf PrimeFaces<；p:steps组件'；s样式未按预期显示

jsf primefaces

Jsf PrimeFaces<；p:steps组件'；s样式未按预期显示,jsf,primefaces,Jsf,Primefaces,我只是想从prime faces showcase页面试用基本prime faces组件：然而，它并没有像预期的那样工作。我将示例从项目中的页面复制到一个单独的facelets文件中但是，与showcase页面上显示的蓝色圆圈不同，我看到的是灰色矩形：我的脸： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facel

我只是想从prime faces showcase页面试用基本prime faces组件

：

然而，它并没有像预期的那样工作。我将示例从项目中的页面复制到一个单独的facelets文件中

但是，与showcase页面上显示的蓝色圆圈不同，我看到的是灰色矩形：

我的脸：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
    <f:facet name="first">
        <style type="text/css">
            body .ui-steps .ui-steps-item {
                width: 25%;
            }

            body .ui-state-highlight {
                text-shadow: none !important;
            }

            body .ui-steps.custom {
                margin-bottom: 30px;
            }

            body .ui-steps.custom .ui-steps-item .ui-menuitem-link {
                height: 10px;
                padding: 0 1em;
                overflow: visible;
                border: 1px solid #c8c8c8;
                display: block;
                background-color: #FFFFFF;
            }

            body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-number
                {
                background-color: #0081c2;
                color: #FFFFFF;
                display: inline-block;
                width: 30px;
                border-radius: 10px;
                margin-top: -10px;
                margin-bottom: 10px;
                position: relative;
                top: -3px;
            }

            body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-title {
                margin-top: -6px;
            }

            body .ui-steps.custom .ui-steps-item.ui-state-highlight .ui-menuitem-link .ui-steps-title
                {
                color: #555;
            }
            </style>
    </f:facet>
    <h3 style="margin-top: 0">Basic</h3>
    <p:steps>
        <p:menuitem value="Personal" />
        <p:menuitem value="Seat Selection" />
        <p:menuitem value="Payment" />
        <p:menuitem value="Confirmation" />
    </p:steps>
</h:body>
</html>


body.ui步骤.ui步骤项{
宽度：25%；
}
body.ui状态突出显示{
文本阴影：无！重要；
}
body.ui-steps.custom{
边缘底部：30px；
}
body.ui-steps.custom.ui步骤项.ui菜单项链接{
高度：10px；
填充：0.1em；
溢出：可见；
边框：1px实心#c8c8c8；
显示：块；
背景色：#FFFFFF；
}
body.ui-steps.custom.ui步骤项.ui菜单项链接.ui步骤编号
{
背景色：#0081c2；
颜色：#FFFFFF；
显示：内联块；
宽度：30px；
边界半径：10px；
利润上限：-10px；
边缘底部：10px；
位置：相对位置；
顶部：-3px；
}
body.ui-steps.custom.ui步骤项.ui菜单项链接.ui步骤标题{
利润上限：-6px；
}
body.ui-steps.custom.ui-steps-item.ui-state-highlight.ui菜单项链接.ui步骤标题
{
颜色：#555；
}
基本的

我在浏览器中看到的内容如下所示：

根据PrimeFaces文档，我应该看到的内容如下所示：

尝试使用交互式菜单步骤：

<p:steps activeIndex="1" styleClass="custom" readonly="false">
  <p:menuitem value="Personal" url="#"/>
  <p:menuitem value="Seat Selection" url="#"/>
  <p:menuitem value="Payment" url="#"/>
  <p:menuitem value="Confirmation" url="#"/>
</p:steps>

这种方法应该有效。

PrimeFaces showcase使用的是“Nova Light”主题，看起来您使用的是Aristo或Omega主题？这可能是因为CSS并没有正确覆盖亚里士多德或欧米茄主题，而CSS是为新星或月亮主题设计的。这方面的信息太少，无法继续下去。但正如@Melloware所说，这是一个主题问题。在浏览器中使用inspector，查看实际应用了哪些CSS规则，以及控制台上是否出现任何错误。@Melloware我通过org.PrimeFaces PrimeFaces 7.0在项目中导入PrimeFaces，因此我不知道使用的是什么主题。但是，当我使用带有复制和粘贴的展示案例中的示例时，我希望它在没有任何额外调整的情况下工作！您得到的是默认主题。如果你没有添加任何额外的主题，这是正确的行为。如果您还有其他期望，请在PrimeFaces Showcase here；的问题跟踪器上提交一个bug@AlexMi看到这篇关于如何更改主题的文章：然后将其更改为showcase使用的同一主题“nova light”。您能否在答案中添加一些文本，并解释您创建了哪些相关更改

 <h:head>
    <style type="text/css">
body .ui-steps .ui-steps-item {
    width: 25%;
}

body .ui-state-highlight {
    text-shadow: none !important;
}

body .ui-steps.custom {
    margin-bottom: 30px;
}

body .ui-steps.custom .ui-steps-item .ui-menuitem-link {
    height: 10px;
    padding: 0 1em;
    overflow: visible;
    border: 1px solid #c8c8c8;
    display: block;
    background-color: #FFFFFF;
}

body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-number
    {
    background-color: #0081c2;
    color: #FFFFFF;
    display: inline-block;
    width: 30px;
    border-radius: 10px;
    margin-top: -10px;
    margin-bottom: 10px;
    position: relative;
    top: -3px;
}

body .ui-steps.custom .ui-steps-item .ui-menuitem-link .ui-steps-title {
    margin-top: -6px;
}

body .ui-steps.custom .ui-steps-item.ui-state-highlight .ui-menuitem-link .ui-steps-title
    {
    color: #555;
}
</style>
</h:head>