12

Using Angular UI Bootstrap, how do we build vertical-stacked tabs that is left-aligned to the tab content which looks like this?

enter image description here

Henry Neo
  • 2,357
  • 1
  • 24
  • 27

4 Answers4

20

Another solution is to create something like this

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

And how in JS

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

In approach like this I have more control over HTML markup.

Sergey Romanov
  • 2,949
  • 4
  • 23
  • 38
  • Thanks Sergey, my question was centered around angular ui bootstrap for others but i really like your approach too.. there's a similar youtube video by Michael Calkins on this approach.. http://www.youtube.com/watch?v=9COtsDovNpM – Henry Neo Oct 16 '14 at 04:46
  • I also used Angular UI but in some cases this approach gave me so much more. That is why I posted it. – Sergey Romanov Oct 20 '14 at 11:24
  • I believe that the JS should be: `$scope.changeTab = function(tab) { $scope.view_tab = tab; }` – Gary Jan 21 '15 at 21:00
  • Hi @Sergey Romanov, In your sample you are displaying text contents as result of tab selection but in my case i have to load new html page with in the page... any suggestions for this approach – PrabaharanKathiresan Aug 23 '16 at 11:47
  • @prababuddy then you have to use ui-router and use states, there is an example already that looks like tabs but actualy every tab loads data into it. – Sergey Romanov Aug 24 '16 at 15:52
13

In order to implement those tabs, we need to do a couple of things.

  1. Add 'tabs-left' css class to angular ui bootstrap tabs as referenced from 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. Add the custom css as answered from 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;
}
Community
  • 1
  • 1
Henry Neo
  • 2,357
  • 1
  • 24
  • 27
  • This method is not working for me. The stacked tabs simply end up above the content instead of to the left. Is this verified with bootstrap 3.3.6 and bootstrap angular ui 2.5? – Derrek Oct 24 '17 at 14:13
  • In my case, one of the elements inside every tab is a bootstrap table. These are 100% fixed width which caused them to drop below the floated tabs. I would still love a solution to that, but the simple thing is to set width to auto (or a fixed amount). Not ideal. – Derrek Oct 24 '17 at 18:00
1

This fiddle implements what you need:

https://jsfiddle.net/GetUIKit/b3nhjvot/

 <div class="col-xs-9">
          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="home-vr">Home Tab.</div>
            <div class="tab-pane" id="profile-vr">Profile Tab.</div>
            <div class="tab-pane" id="messages-vr">Messages Tab.</div>
            <div class="tab-pane" id="settings-vr">Settings Tab.</div>
          </div>
        </div>

        <div class="col-xs-3"> <!-- required for floating -->
          <!-- Nav tabs -->
          <ul class="nav nav-tabs tabs-right sideways">
            <li class="active"><a href="#home-vr" data-toggle="tab">Home</a></li>
            <li><a href="#profile-vr" data-toggle="tab">Profile</a></li>
            <li><a href="#messages-vr" data-toggle="tab">Messages</a></li>
            <li><a href="#settings-vr" data-toggle="tab">Settings</a></li>
          </ul>
</div>

Switch between tabs can be done as it is explained in Sergey's answer

Denis Evseev
  • 1,660
  • 1
  • 18
  • 33
0

I've created a gist for what we need :

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

hugsbrugs
  • 3,501
  • 2
  • 29
  • 36