कोणीय यूआई बूटस्ट्रैप वर्टिकल टैब

Question

कोणीय यूआई बूटस्ट्रैप का उपयोग करके, हम वर्टिकल-स्टैक्ड टैब कैसे बनाते हैं जो टैब सामग्री पर बाएं-गठबंधन होते हैं जो इस तरह दिखते हैं?

Answer 1

आदेश उन टैब लागू करने के लिए, हम चीजों के एक जोड़े की ज़रूरत है।

1. जोड़े 'टैब-बाएँ' कोणीय यूआई बूटस्ट्रैप टैब के लिए सीएसएस वर्ग से 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. संदर्भित के रूप में कस्टम सीएसएस के रूप में जोड़ें 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

से जवाब एक और समाधान यह है कि इस तरह के कुछ बनाने के लिए

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

और कैसे जे एस

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

इस तरह दृष्टिकोण में में मैं HTML मार्कअप पर अधिक नियंत्रण है।

Answer 3

मैं हम क्या जरूरत के लिए एक सार बना लिया है:

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