如何制作p:向导标签看起来像箭头?

时间:2017-04-12 21:57:30

标签: primefaces jsf-2.2

如何使p:tab中的p:wizard看起来像箭头, 像附图一样的东西

enter image description here

提前谢谢。

1 个答案:

答案 0 :(得分:1)

您可以通过CSS执行此操作:

.firstTab{    
    line-height: 43px;
    text-align:center;  
    height:60px;
    width:210px;
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.middleTab{    
    line-height: 43px;
    text-align:center;  
    margin-left: -30px !important;
    height:60px;
    width:210px;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.lastTab{
    line-height: 43px;
    text-align:center;  
    margin-left: -85px !important;
    height:60px;
    width:220px;
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 55% 50%);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 50% 50%);
}

在你的xhtml文件中:

    <p:tabView activeIndex="#{declarationMBean.activeIndex}" style="align-content: center; background: #67a3cf;" >
            <p:ajax event="tabChange" listener="#{declarationMBean.onTabChange}" />
            <p:tab id="tab_0" title="Example" titleStyleClass="firstTab" > 
.
.
.
 <p:tab id="tab_2" titleStyleClass="middleTab"> 
.
.    
 <p:tab id="tab_3" titleStyleClass="middleTab">     
.
.
<p:tab id="tab_4" titleStyleClass="lastTab">