Skip to content

Instantly share code, notes, and snippets.

@elad
Created September 11, 2015 00:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elad/220df70696633085a91b to your computer and use it in GitHub Desktop.
Save elad/220df70696633085a91b to your computer and use it in GitHub Desktop.
Angular + Bootstrap tabs, stacked on the side
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="" ng-click="vm.activeTab = 'one'" data-toggle="pill">
One header
</a>
</li>
<li>
<a href="" ng-click="vm.activeTab = 'two'" data-toggle="pill">
Two header
</a>
</li>
<li>
<a href="" ng-click="vm.activeTab = 'three'" data-toggle="pill">
Three header
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" ng-class="{ active: !vm.activeTab || vm.activeTab == 'one' }">
One content
</div>
<div class="tab-pane" ng-class="{ active: vm.activeTab == 'two' }">
Two content
</div>
<div class="tab-pane" ng-class="{ active: vm.activeTab == 'three' }">
Three content
</div>
</div>
@chouaali
Copy link

chouaali commented Feb 9, 2021

poapozp
zlkzza

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment