在侧边栏中实现UI Bootstrap选项卡

Question

我正在使用UI Bootstrap和AngularJS，并且我试图使用col md-2和col md-10将垂直选项卡分离到一个侧边栏中。

目前我有..。

<uib-tabset active="activePill" vertical="true" type="pills">
    <uib-tab heading="Tab 1">Vertical content 1</uib-tab>
    <uib-tab heading="Tab 2">Vertical content 2</uib-tab>
    <uib-tab heading="Tab 3">Vertical content 3</uib-tab>
</uib-tabset>

..。哪种输出...

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
    <ul class="nav nav-pills nav-stacked" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" heading="Tab 1">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 1</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Tab 2">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 2</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Builds">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <!-- ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 1</span>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 2</span>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <span class="ng-scope">Vertical content 3</span>    
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
    </div>
</div>

我想要..。

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope">
    <ul class="nav nav-pills nav-stacked col-md-2" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
    <!-- snip -->
    </ul>
    <div class="tab-content col-md-10">
    <!-- snip -->
    </div>
</div>

(增加了col-md-2和col-md-10)

Answer 1

我的团队曾经解决过这个问题，我认为你不能把它们放在一边(这与指令的结构有关)，所以我们必须删除body指令，缩小选项卡容器，并在右侧的不同div上显示状态视图。

<div class="col-sm-2">
  <uib-tabset active="active" vertical="true" type="pills">
    <uib-tab heading="Tab 1" select="selected(1)"></uib-tab>
    <uib-tab heading="Tab 2" select="selected(2)"></uib-tab>
    <uib-tab heading="Tab 3" select="selected(3)"></uib-tab>
  </uib-tabset>
</div>
<div class="col-sm-10">
  <div ng-show="selectedView===1">
    Show what tab 1 is selected
  </div>
  <div ng-show="selectedView===2">
    Show what tab 2 is selected
  </div>
  <div ng-show="selectedView===3">
    Show what tab 3 is selected
  </div>
</div>

Sample plunker

这当然是一个简化的例子，我们所做的是，使用ui-router在右边显示不同的状态，这使它成为一个更“真实”的导航栏，我们不必重复丑陋的<div ng-show="selectedView===#">标记部分。