是否可以使用AngularJS在Kendo UI中实现垂直选项卡？

Question

是否可以在Kendo UI中实现垂直标签？

我希望结果与此屏幕截图类似：

Answer 1

不，Kendo UI暂时不包含垂直制表符小部件。

<强> !! UPDATE !!

Kendo UI现在支持标签方向 - 垂直和底部标签。这是一个demo。

Answer 2

尝试在UI引导程序中使用垂直选项卡

<tabset vertical="true" type="navType">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
</tabset>

浏览此页面以供参考 http://angular-ui.github.io/bootstrap/

Answer 3

添加

class“tabstrip-vertical”

CSS

.k-widget.k-tabstrip.tabstrip-vertical {
    /*Width of the tabs*/
    padding-left:12em;
    border-style:none;

}

    .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items {
        left:0px;
        position:absolute;
        border-style:none;

    }

        .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item {
            display:block;
            border-radius:4px 0 0 4px;
            border-width:1px 0 1px 1px;
            /*Width of the tabs*/
            width:12em;
            border-style:none;

        }

            .k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item.k-state-active {
                border-right-color:#fff;
                border-right-width:1px;
                border-style:none;

            }

Answer 4

垂直导向的Tabstrips已添加到2015年第一季的Kendo UI版本中。

您可以在此处找到更多详细信息：http://demos.telerik.com/kendo-ui/tabstrip/tab-position

Answer 5

尝试jQueryUI

它有垂直标签组件。

http://jqueryui.com/tabs/#vertical

此链接也有演示。

Answer 6

nklein提到它是一个新功能。 如果您无法获得新版本，您可以随时使用菜单栏，它有方向支持。