Ionic vertical tabs

ionic-v1
1

Hello

I am using ionic in my application, and I am able to use horizontal tabs perfectly.
Is it possible to have vertical tabs, something like below

2

Is there anyone who knows something about this ?

3

Will anyone respond ?

4

I am kind of starting feeling frustrated.
There is documentation for tab list in ionic and it describes tabs-bottom, tabs-top icon placement. But there is no documentation for vertical tabs, either there should be shomething whether it is possible or not via inoic, if it’s possible how to do it.
There should be clear steps mentioned.

5

Hey there, so vertical tabs aren’t set up out of the box, but you can write some css to get it going .

Keep in mind, you’ll need to add to the css (scss) for tabs on ios and android.

6

Hi @spanhawk, since that feature isn’t a standard for mobile application, I don’t think Ionic will ever have it. If you want “vertical tabs” you could simply add extra css to replace the Ionic’s one.

7

Here’s another option which works with dynamic tabs:

Basically, it leverages the pattern for adding a tab selction to a list, where [ usually ] the last .item is blended with the .tabs class – making a .item.tabs element.

This example simply wraps certain elements within .col-Ns [ and a .row ] for practicality sake. Likewise, it also uses the ng-init variables along with the ng-click & ng-if statements for dynamism. So, once again, the meat & potatoes are the .item.tabs and .item.tabs > .tab-item elements.

The only other thing to note, because this example employs the .pane class, is that you may end up also needing the .item-borderless class.

Raw / Basic (One, single tab):

<!-- Wrap me in a `.list` element -->
<div class="item tabs">
    <div class="tab-item">
        <i class="badge">A</i>
    </div>
</div>

Dynamic (with Background & Layout adjustments):

<div class="row row-no-padding padding-vertical" ng-init="thus.tabs = [ 'A', 'B', 'C', 'D', 'E', 'F' ]; thus.view = 'A'">
    <div class="col-20">
        <div class="item tabs item-borderless item-assertive" ng-repeat="tab in thus.tabs">
            <div class="tab-item" ng-click="thus.view = tab;">
                <i class="badge">{{tab}}</i>
            </div>
        </div>
    </div>
    <div class="col-80" ng-repeat="tab in thus.tabs" ng-if="thus.view == tab">
        <div class="item item-borderless item-dark pane">
            <i class="icon">{{tab}}</i>
        </div>
    </div>
</div>

I know this may not suffice for your particular needs, but its at least enough to get you started I hope.