How to use as a simple row of buttons?

@doron wrote:

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.

Posts: 1

Participants: 1

Read full topic