PrimeFaces - PullRequest
Новая
       103

PrimeFaces

0 голосов
/ 23 февраля 2020

Я просто хотел опробовать базовый c компонент простых лиц <p:steps> со страницы демонстрации простых лиц:

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

однако, это не работает, как ожидалось. Я скопировал пример со страницы моего проекта в отдельный файл Facelets.

Но вместо синих кружков, как показано на странице демонстрации, я вижу серые прямоугольники:

My facelet: 

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

То, что я вижу в своем браузере, показано ниже:

What I see in my browser

Что я должен увидеть в соответствии с PrimeFaces документация также показана ниже:

What I am supposed to see accroding to the PrimeFaces documentation

1 Ответ

0 голосов
/ 27 февраля 2020

Попробуйте использовать шаги интерактивного меню: 

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

Этот подход должен работать.

...