feat(tabs): add support of Vertical tabs

[kmaci3k]

Is there any way to configure ngx-bootstrap veritcal tabs in a way that headings are on the left side (class="col-3"), and content is next to it (class="col-9") ?

[IlyaSurmay]

There's no such possibility for now. I'll mark this issue as feature request

[hellodpk]

Hi I also want such feature and after long hours of search and trial, I managed to solve by

@Component({ selector: 'your-selector', templateUrl: 'your-selector.component.html', styles: [ ':host >>> tabset.tabset>ul{border-bottom: 1px solid #ddd;float: left; display: block;margin-right: 20px;border-bottom: 0;border-right: 1px solid #ddd;padding-right: 15px;}' ], })

This .tabset is added to the selective tabset element so that I want to have vertical layout for that element only.

In HTML

<tabset class="tabset"> <tab *ngFor="let data of yourDynamicData; let index=index" [heading]="data">{{index}} Content</tab> </tabset>

Sample Output

Note I am Using "ngx-bootstrap": "^1.9.3",

Hope it helps community.

[aitorllj93]

Hi, I have found another way to make vertical tabs work with vertical behavior.

Add this to your stylesheets:

.tab-container {
  display: inherit;
}

And then wrap your tabset in a row element (should work with any element with a display:flex)

<div class="row">
  <tabset [vertical]="true" type="pills">
    <tab heading="Vertical 1">Vertical content 1</tab>
    <tab heading="Vertical 2">Vertical content 2</tab>
  </tabset>
</div>

If you want the default behavior you can wrap it with a display:block or display:inline element