How to use <ion-tabs> as a simple row of buttons?


#1

I really like the way <ion-tabs> works in terms of its placement and design.

I’m creating a file/folder interface where I want to use the graphics and auto-placement of Ionic2’s <ion-tabs> but not their navigation features. I already have a tabs page component for navigation, but in these in-page tabs I wish to use (I need two tabs bars showing per page sometimes), I simply need to treat the tab bar as a bar of buttons that look nice - they take care of icon placement and font sizes exactly how I need them…

I tried adding this HTML block

    ...
</ion-navbar>

<ion-toolbar dark>
    <ion-tabs>
        <ion-tab tabTitle="Tab 1">
        </ion-tab>
        <ion-tab tabTitle="Tab 2">
        </ion-tab>
        <ion-tab tabTitle="Tab 3">
        </ion-tab>
        <ion-tab tabTitle="Tab 4">
        </ion-tab>
    </ion-tabs>
</ion-toolbar>

<ion-content>
    ...

between the </ion-navbar> and <ion-content> tags – it shows a toolbar of some height, but empty – no text or icon, no tabs. The tabs don’t click when I add a (click)=“onClick()” function to an <ion-tab> in the HTML above.

I tried the same HTML block but without the outer <ion-toolbar> tag – this time, absolutely nothing shows up.

How can we display tabs and use them only as buttons? Has anybody successfully done that?

Perhaps, instead, we should add a new component <ion-buttonbar> that inherits from <ion-toolbar>, only has buttons, and the buttons look no different than <ion-tabs> tabs. Your opinions?

Thanks!

Edit: just saw this issue #44627, which may answer the question - use <ion-segment>

Edit 2: Tried using <ion-segment> to replicate tab look - it worked fine and required some CSS to get the icons on top of the text - however, while this works well in android I’m still having difficulty getting a two-line button in ios’s version of <ion-segment>… this buttonbar issue is not yet solved …

Edit 3: Yeah, using <ion-segment>, after too much tinkering with CSS, does not seem like a good solution, esp. in ios. I’m now trying to set up a blank tabs app to have a second page with another tabs bar, then hide any of the two tabs at will - perhaps that’s a better approach.

Seems like this component: a tabbar that does not navigate but just can intercept button clicks, with seamlessly allowing multiple such tabbars on a page, would be a very useful component to have.


#2

OK, got a good enough tab look-alike using ion-row/col and buttons, see code snippet below. It would still be very useful to have a component, maybe one day I’ll write one.

HTML

<div class="buttonbar4">
    <button outline ion-row center>
        <ion-col>
            <ion-icon name="radio-button-off"></ion-icon>
            <ion-icon name="md-arrow-dropdown"></ion-icon>
            <br> Select
            <br>
        </ion-col>
    </button>
    <button outline (click)="goToParent()" [disabled]="folderPath === '/'" ion-row center>
        <ion-col>
            <ion-icon name="arrow-up"></ion-icon>
            <ion-icon name="folder"></ion-icon>
            <br> Parent
            <br>
        </ion-col>
    </button>
    <button outline (click)="onClickAddButton()" ion-row center>
        <ion-col>
            <ion-icon name="md-add"></ion-icon>
            <ion-icon name="folder"></ion-icon>
            <br> Add
            <br>
        </ion-col>
    </button>
    <button outline ion-row center>
        <ion-col>
            <ion-icon name="folder"></ion-icon>
            <ion-icon name="information-circle"></ion-icon>
            <br> Info
        </ion-col>
    </button>
</div>

SCSS

div.buttonbar4 {
    text-align: center;
    width: 100%;
    white-space: nowrap;
    button {
        /* use width: 23% for 4 buttons, width: 18.2% for 5 buttons */
        width: 23%
        font-size: 11px;
        height: 40px;
        ion-col {
            text-align: center;
            ion-icon {
                /* margin-bottom controls the space between the icons and text */
                margin-bottom: 3px;   
            }
        }
    }
}

#3

Right now, this is not what ion-tabs are designed to do. But it is on our road map to expand them for this.


#4

I wanted to achieve the same result and I ended up as well with my own simple implementation. However it’s good to know that it’s on the roadmap and it’ll become part of the framework. Thanks for the heads up, @mhartington!


#5

The code I posted above is now old.

I ended up implementing the button toolbar in a better way: as a simple directive called <button-toolbar>, based on <ion-toolbar>.

HTML / ts / Scss are here

NOTE: SCSS has only been written and tested for 3-button, 4-button or 5-button <button-toolbar>'s.


#6

@doron Unfortunately that github page is no longer and I am searching for this exact solution. Any chance to get your code elsewhere?


#7

Sorry about that - the name was changed, the code is still there, but it has been simplified / improved as follows:

  • The code for the button toolbar has been renamed from button-toolbar to button-bar.
  • The original code handled 3, 4 or 5 buttons but now any number of buttons is allowed (you still have to visually test that they fit horizontally across your device’s screen or the buttons that do not fit will not be seen) - I’ve been able to fit five buttons in an iPhone 4 size screen (320px width).
  • The original code template was wrapped in an <ion-toolbar> but there was no need for that, so now you have to wrap the button-bar yourself with <ion-toolbar> if it is indeed a toolbar or use it anywhere else without the machinery of <ion-toolbar> (So far, I’ve only used it wrapped in an <ion-toolbar>).

That newer code is here.

It’s a directive so use it as such. Example usage is here - attaching a screen shot of that page with two button-bars in it showing.


#8

Last and probably / hopefully final location of the code is here:

button-bar

[ Code only lets me add links, but not edit an old entry, this is why you see so many links. ]


#9

Oops just saw your response. Please see https://github.com/tracktunes/ionic-recorder/tree/master/src/components/button-bar.