是否可以使用AngularJS在Kendo UI中實現垂直選項卡？

Question

可以在Kendo UI中實現垂直選項卡嗎？

我希望結果類似於此屏幕截圖：

Answer 1

不，Kendo UI目前暫不包含垂直的Tabstrip小部件。

!!更新!!

Kendo UI現在支持標簽方向-垂直和底部標簽。 這是一個演示 。

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

只需添加

類“垂直的標簽”

的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

垂直方向的Tabstrip已添加到2015年第一季度Kendo UI版本中。

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

Answer 5

試試jQueryUI

它具有垂直選項卡組件。

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

此鏈接也有演示。

Answer 6

正如nklein所說，這是一個新功能。 如果無法獲取新版本，可以通過任何方式使用菜單欄，它具有方向支持。