使用PrimeFaces TabView时，使标签在侧面垂直显示

Question

我正在使用PrimeFaces TabView，想知道是否有办法让标签垂直显示在侧面（左侧或右侧，最好是左侧），而不是横向顶部。

如果有人知道使用PrimeFaces或平面JSF获得所需效果的任何其他方法，我也会接受。

感谢。

Answer 1

是的，可能。您可以使用方向属性

Answer 2

PrimeFaces TabView使用jQuery UI Tabs实现。看看这个问题Vertical Tabs with jQuery。您可以尝试使用该问题中提供的答案来覆盖PrimeFaces选项卡CSS，以便为您提供垂直选项卡。

Answer 3

此代码显示了如何以自上而下的顺序（垂直）管理标签：

<p:tabView orientation="left">
        <p:tab title="Tab#1">
            Tab#1
        </p:tab>
        <p:tab title="Tab#2">
            Tab#2
        </p:tab>
        <p:tab title="Tab#3">
            Tab#3
        </p:tab>
        <p:tab title="Tab#4">
            Tab#4
        </p:tab>
</p:tabView>

并且，此代码显示了如何以左右或顺序（水平）管理标签：

<p:tabView scrollable="true">
        <p:tab title="Tab#1">
            Tab#1
        </p:tab>
        <p:tab title="Tab#2">
            Tab#2
        </p:tab>
        <p:tab title="Tab#3">
            Tab#3
        </p:tab>
        <p:tab title="Tab#4">
            Tab#4
        </p:tab>
        <p:tab title="Tab#5">
            Tab#5
        </p:tab>
        <p:tab title="Tab#6">
            Tab#6
        </p:tab>
        <p:tab title="Tab#7">
            Tab#7
        </p:tab>
        <p:tab title="Tab#8">
            Tab#8
        </p:tab>
</p:tabView>

Answer 4

根据文档，我不相信这是可能的，但是您可以利用菜单组件来获得优势吗？

http://www.primefaces.org/showcase/ui/menu.jsf

我在主页面中使用了菜单将内容加载到母版页主体中。单击特定菜单将加载相应的子页面。