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

Ionic Framework ionic-v3
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.

2 Likes
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!

6

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

10

I just use event.stopImmediatePropagation();

Simple and quick :slight_smile:

For example:

<ion-footer>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="notImportant" (click)="clickMe($event)">
      <ion-icon name="heart"></ion-icon>
      <ion-label>Click Me</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-footer>

Then, in your component.ts file

...
export class TabsComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

  clickMe(e:Event) {
    e.stopImmediatePropagation();
    console.log("clicked.");
  }

}
11

Hi,

just a quick question about the Roadmap:
In the hight level it says Desktop Support.
What does that excatly mean?
Will it be possible to generate Desktop Applications from an Ionic project? Like electronjs?

Thanks

12

BTW, the reference to the road map item that is referred to in this post has been completed for all platforms, desktop or mobile. Maybe you are looking at some other roadmap item? This one is completely up and running, it works. It is the one referred to by @parhelion – the components <ion-tab-bar> and <ion-tab-button> .

13

Apologies that the previous link was gone - just noticed that. I put the newest version of button bar - which today mimics the tab-bar quite closely in appearance - here:

Caveat: I am too busy and unable to interact much with these code these days (would always process a pull request, though, of course).