我只想从基本面展示页面上试用基本基本面组件<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文档应该显示的内容:
<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>
此方法应该有效。