使用 PrimeFaces TabView 时使选项卡垂直显示在侧面答案

【问题标题】：Make tabs appear vertically on the side when using PrimeFaces TabView使用 PrimeFaces TabView 时使选项卡垂直显示在侧面
【发布时间】：2011-05-23 14:07:32
【问题描述】：

我正在使用 PrimeFaces TabView，想知道是否有办法让选项卡垂直显示在侧面（左侧或右侧，最好是左侧）而不是水平显示在顶部。

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

谢谢。

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

此代码显示了如何以 TOP-DOWN 顺序（垂直）管理选项卡：

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

【讨论】：

【解决方案4】：

根据文档，我认为这是不可能的，但是也许您可以利用 Menu 组件来发挥自己的优势？

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

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

【讨论】：