Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular UI Bootstrap Vertical Tabs

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

like image 705
Henry Neo Avatar asked Oct 16 '14 01:10

Henry Neo


2 Answers

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

like image 179
Denis Evseev Avatar answered Oct 29 '22 00:10

Denis Evseev


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;
    }
    
like image 29
Henry Neo Avatar answered Oct 28 '22 22:10

Henry Neo