ng-bootstrap with vertical tabs?

Question

I'm trying to use ng-Bootstrap tabs vertically. They give an example but it is not what I need, I would like it to look something like what I have in the diagram. Is this configuration possible? Any ideas on what direction to take?

Answer 1

Here is the sample code of vertical tabs.

Html:

    <div class="row">
    <div class="col-md-12">  
      <h3 id="event-list-margin">Vartical Tabs</h3>
    </div>
<div class="col-md-12">
    <div class="col-xs-3"> <!-- required for floating -->
      <!-- Nav tabs -->
      <ul class="nav nav-tabs tabs-left">
        <li [ngClass]="{'active': tab.active}" *ngFor="let tab of tabs">
          <a (click)="tabChange(tab)">{{tab.name}}</a>
        </li>
       
      </ul>
    </div>

    <div class="col-xs-9">
      <div class="tab-content">
        <div class="tab-pane active" [ngClass]="{'showTab':selectedUserTab == 1, 'hideTab':selectedUserTab != 1}"> <!-- Profile tab -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title one
                </div> 
                <div class="panel-body">
  
                </div>  
            </div>
        </div>
        
        <div class="tab-pane active" [ngClass]="{'showTab':selectedUserTab == 2, 'hideTab':selectedUserTab != 2}"> <!-- Change password tab -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title Two
                </div> 
                <div class="panel-body">
  
                </div>  
            </div>
        </div>

        <div class="tab-pane active" [ngClass]="{'showTab':selectedUserTab == 3, 'hideTab':selectedUserTab != 3}"> <!-- Admin tab -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title Three
                </div> 
                <div class="panel-body">
  
                </div>  
            </div>
        </div>

        <div class="tab-pane active" [ngClass]="{'showTab':selectedUserTab == 4, 'hideTab':selectedUserTab != 4}"> <!-- stripe account tab -->
          <div class="panel panel-default">
              <div class="panel-heading">
                Title Four
              </div> 
              <div class="panel-body">

              </div>    
          </div>
        </div>   
      </div>
    </div>
</div>
</div>

CSS:

            .tabs-left, .tabs-right {
            border-bottom: none;
            padding-top: 2px;
        }
        .tabs-left {
            border-right: 1px solid #ddd;
        }
        .tabs-right {
            border-left: 1px solid #ddd;
        }
        .tabs-left>li, .tabs-right>li {
            float: none;
            margin-bottom: 2px;
        }
        .tabs-left>li {
            margin-right: -1px;
        }
        .tabs-right>li {
            margin-left: -1px;
        }
        .tabs-left>li.active>a,
        .tabs-left>li.active>a:hover,
        .tabs-left>li.active>a:focus {
            border-bottom-color: #ddd;
            border-right-color: transparent;
        }
        
        .tabs-right>li.active>a,
        .tabs-right>li.active>a:hover,
        .tabs-right>li.active>a:focus {
            border-bottom: 1px solid #ddd;
            border-left-color: transparent;
        }
        .tabs-left>li>a {
            border-radius: 4px 0 0 4px;
            margin-right: 0;
            display:block;
        }
        .tabs-right>li>a {
            border-radius: 0 4px 4px 0;
            margin-right: 0;
        }
        .sideways {
            margin-top:50px;
            border: none;
            position: relative;
        }
        .sideways>li {
            height: 20px;
            width: 120px;
            margin-bottom: 100px;
        }
        .sideways>li>a {
            border-bottom: 1px solid #ddd;
            border-right-color: transparent;
            text-align: center;
            border-radius: 4px 4px 0px 0px;
        }
        .sideways>li.active>a,
        .sideways>li.active>a:hover,
        .sideways>li.active>a:focus {
            border-bottom-color: transparent;
            border-right-color: #ddd;
            border-left-color: #ddd;
        }
        .sideways.tabs-left {
            left: -50px;
        }
        .sideways.tabs-right {
            right: -50px;
        }
        .sideways.tabs-right>li {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .sideways.tabs-left>li {
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }
        .showTab{
            display: block !important;
        }
        .hideTab{
            display: none !important;
        }

TypeScript code:

selectedUserTab = 1;
   tabs = [
     {
       name: 'Title one',
       key: 1,
       active: true
     },
      {
      name: 'Title two',
      key: 2,
      active: false
    },
    {
      name: 'Title 3',
      key: 3,
      active: false
    },
    {
      name: 'Title Four',
      key: 4,
      active: false
    }
   ];

tabChange(selectedTab) {
    console.log('### tab change');
    this.selectedUserTab = selectedTab.key;
    for (let tab of this.tabs) {
        if (tab.key === selectedTab.key) {
          tab.active = true;
        } else {
          tab.active = false;
        }
    }
  }

Sample Output:

Note: you need to some changes on CSS.