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> ...
<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?
Edit: just saw this issue #44627, which may answer the question - use
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.