Внедрить вкладки Bootstrap UI в боковой панели

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, чтобы показать различные состояния на праве, что сделало его более «подлинный» нав-баром, и мы Ждем» t необходимо повторить уродливые детали разметки <div ng-show="selectedView===#">.