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

【问题标题】：Is it possible to implement vertical tabs in Kendo UI using AngularJS?是否可以使用 AngularJS 在 Kendo UI 中实现垂直选项卡？
【发布时间】：2014-01-03 13:03:11
【问题描述】：

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

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

【问题讨论】：

标签： html jquery-ui angularjs kendo-ui

【解决方案1】：

不，Kendo UI 暂时不包含垂直标签条小部件。

！！更新！！

Kendo UI 现在支持选项卡方向 - 垂直和底部选项卡。这是demo。

【讨论】：

我们怎样才能实现它？
您无法使用 Kendo UI 实现它。这就是我在回复中所说的。
请提供任何其他替代方式来使用垂直制表符。
正如我两次所说的那样，Kendo UI 不包含垂直标签条小部件。尝试在线搜索另一个垂直标签条组件。
感谢您的宝贵意见

【解决方案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/

【讨论】：

这是 Angular 的，剑道 ui 有什么用吗？我在下面尝试了nklein的anwer，但是选项卡内的元素表现不佳，我的意思是它们分散在选项卡内。

【解决方案3】：

只需添加

类“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;

            }

【讨论】：

【解决方案4】：

2015 年第一季度 Kendo UI 版本中添加了垂直方向的标签条。

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

【讨论】：

我没有找到任何说明如何在 angularJS 应用程序中使用 tabPosition 属性 (docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/…) 的示例。如果我能从这里得到一个会很高兴。

【解决方案5】：

试试 jQueryUI

它有垂直标签组件。

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

此链接也有演示。

【讨论】：

【解决方案6】：

正如 nklein 所说，这是一项新功能。无论如何，如果您无法获得新版本，您可以随时使用菜单栏，它具有方向支持。

【讨论】：