Angular UI Bootstrap 垂直标签答案

【问题标题】：Angular UI Bootstrap Vertical TabsAngular UI Bootstrap 垂直标签
【发布时间】：2014-10-16 01:06:08
【问题描述】：

使用 Angular UI Bootstrap，我们如何构建垂直堆叠的标签，该标签与看起来像这样的标签内容左对齐？

【问题讨论】：

标签： angularjs tabs angular-ui angular-ui-bootstrap

【解决方案1】：

另一种解决方案是创建这样的东西

<div class="row">
<div class="col-sm-3">
    <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
        <li ng-class="{'active': view_tab == 'tab1'}">
            <a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
        </li>
        <li ng-class="{'active': view_tab == 'tab2'}">
            <a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
        </li>
    </ul>
</div>
<div class="col-sm-9">
    <div class="tab-content">
        <div class="tab-pane" ng-show="view_tab == 'tab1'">
            This is tab 1 content
        </div>
        <div class="tab-pane" ng-show="view_tab == 'tab2'">
            This is tab 2 content
        </div>
    </div>
</div>
</div>

以及如何在 JS 中

$scope.changeTab = function(tab) {
    $scope.view_tab = tab;
}

在这样的方法中，我可以更好地控制 HTML 标记。

【讨论】：

谢谢 Sergey，我的问题主要集中在其他人的 angular ui bootstrap 上，但我也很喜欢你的方法.. Michael Calkins 有一个类似的 youtube 视频关于这种方法.. youtube.com/watch?v=9COtsDovNpM
我也使用了 Angular UI，但在某些情况下，这种方法给了我更多。这就是我发布它的原因。
我认为JS应该是：$scope.changeTab = function(tab) { $scope.view_tab = tab; }
@Gary 当然。谢谢。
嗨@Sergey Romanov，在您的示例中，您正在显示文本内容作为选项卡选择的结果，但在我的情况下，我必须在页面中加载新的html页面......对此方法的任何建议

【解决方案2】：

为了实现这些选项卡，我们需要做几件事。

将“tabs-left”css 类添加到从 https://github.com/angular-ui/bootstrap/issues/102 引用的角度 ui 引导选项卡中

<tabset class="tabs-left">
    <tab heading="Vertical A">Vertical content A</tab>
    <tab heading="Vertical B">Vertical content B</tab>
</tabset>

添加Stacked Tabs in Bootstrap 3回复的自定义css

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
    border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
    border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
}

【讨论】：

这个方法对我不起作用。堆叠的选项卡最终只是在内容上方而不是在左侧。这是否通过 bootstrap 3.3.6 和 bootstrap angular ui 2.5 进行了验证？
就我而言，每个选项卡中的元素之一是引导表。这些是 100% 固定宽度，导致它们低于浮动标签。我仍然希望有一个解决方案，但简单的事情是将宽度设置为自动（或固定数量）。不理想。

【解决方案3】：

这个小提琴实现了你所需要的：

https://jsfiddle.net/GetUIKit/b3nhjvot/

 <div class="col-xs-9">
          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="home-vr">Home Tab.</div>
            <div class="tab-pane" id="profile-vr">Profile Tab.</div>
            <div class="tab-pane" id="messages-vr">Messages Tab.</div>
            <div class="tab-pane" id="settings-vr">Settings Tab.</div>
          </div>
        </div>

        <div class="col-xs-3"> <!-- required for floating -->
          <!-- Nav tabs -->
          <ul class="nav nav-tabs tabs-right sideways">
            <li class="active"><a href="#home-vr" data-toggle="tab">Home</a></li>
            <li><a href="#profile-vr" data-toggle="tab">Profile</a></li>
            <li><a href="#messages-vr" data-toggle="tab">Messages</a></li>
            <li><a href="#settings-vr" data-toggle="tab">Settings</a></li>
          </ul>
</div>

选项卡之间的切换可以按照 Sergey 的回答中的说明进行

【讨论】：

【解决方案4】：

我已经为我们需要的东西创建了一个要点：

https://gist.github.com/hugsbrugs/c85a6b1c10d03e8cb0da

【讨论】：