PrimeFaces

Question

我只想从基本面展示页面上试用基本基本面组件<p:steps>：

https://www.primefaces.org/showcase/ui/menu/steps.xhtml

但是，它不能按预期工作。我将示例从项目页面的示例复制到单独的facelets文件中。

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

我的脸孔：

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

我在浏览器中看到的显示如下：

下面还显示了PrimeFaces文档应该显示的内容：

Answer 1

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

并将CSS放置在h:head（不是强制性的位置）：

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

此方法应该有效。

PrimeFaces

问题描述投票：-1回答：1

1个回答

最新问题

PrimeFaces

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1