Angular UI Bootstrap Vertical Tabs

Question

Mit Angular UI Bootstrap, wie erstellen wir vertikal gestapelte Tabs, die linksbündig zum Inhalt der Registerkarte, die so aussieht?

Answer 1

Um diesen Tabs zu implementieren, müssen wir ein paar Dinge zu tun.

1. Add 'tabs-links' CSS-Klasse zu Winkeln ui Bootstrap-Tabs verwiesen als von https://github.com/angular-ui/bootstrap/issues/102

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

2. die benutzerdefinierten CSS hinzufügen als beantwortet von Stacked Tabs in Bootstrap 3

   .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; 
   } 
   

Answer 2

Eine andere Lösung ist, so etwas zu erstellen

<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> 

Und wie in JS

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

Im Ansatz wie diese habe ich mehr Kontrolle über die HTML-Markup.

Answer 3

Ich habe einen Kern geschaffen für das, was wir brauchen:

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