Ionic Swipeable Tabs are now here!


#102

No possibility to do that?

Thanks


#103

On a page I have native googlemaps, and I can not move the map, is there any solution?

Thanks


#104

Hi guys,
when I redirect to page with tabs with set tab index to 1, the tab is selectet right, but no data are rendered. This data are in variable and logged in console, so data are there.

If I change tab and return to the tab from redirect. It works that.

Do you have any idea what can be wrong?

redirect is:

 this.navCtrl.push(Dashboard, {
      selectedTab: 1
 })

and tabs:

 <super-tabs scrollTabs selectedTabIndex="{{selectedTab}}" (tabSelect)="onTabSelect($event)">

#105

Hi @mcihak, I had the similar issue. I tried your css:

.indicator {
    transform: translate3d(0px, 0px, 0px) scale3d(1.05, 1, 1) !important;
    transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1) !important;
 }

But the indicator position does not even change when switching to a tab that is not the first tab. Could you please post a bit more of your html and css. Thanks :smiley:


#106

Hi, from new version of ionic and tabs I am not doing this any more. So try to update your versions.


#107

Danke schön @mcihak!


#108

when I use badge attribute, e.g.

<super-tab [root]="salesPage" title="Sales" icon="cart" badge="30"></super-tab>
<super-tab [root]="messagePage" title="Message" icon="mail"></super-tab>

badge “30” was too close to the next title “Message”, so I increased the margin-right of super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon to 50px, but class .indicator’s position is off now, i.e. selecting the second tab “Message” and its indicator line is no longer aligned exactly below the second tab.

Please see screenshots:

I know the position and width of .indicator is calculated at runtime, but is there a way to increase the space between any two tabs while also keeping the indicator line right below its tab title? Any idea is really appreciated.


#109

Hi. Can you help me out my problem. My problem is I can’t slide the tab. I did configuration according to the pictures above.


#110

Hi @phyokyaw, Have you added scrollTabs in your super-tabs tag like this: <super-tabs scrollTabs><super-tab ...></super-tab></super-tabs>


#111

For people who wanna position indicator right below its title, you need add margin in super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon ion-icon and super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button .title. If you add margin in super-tabs-toolbar > ion-toolbar.toolbar .tab-buttons-container .tab-buttons super-tab-button.title-and-icon, your indicator line will not have the correct offset, i.e. indicator line will not be placed right below its title.
If you wanna see the result, please refer to this screenshot:


#112

Hi,
did you solve showing badge after redirect from another page back to page with tabs badges? They do not show to and do not know what can be wrong :-/


#113

Sorry @mcihak, I do not have the issue that badge is not being displayed after returning from other pages. Btw I’m using “ionic-angular”: “3.6.0”. Badge is missing after returning from other pages sounds like badgeVar in <super-tab [badge]="badgeVar"></super-tab> becomes undefined after returning from other pages. Cheers


#114

@JoseMendes did you get solution of that error?
Thanks for the super-tabs. :slight_smile:


#115

@ihadeed Hi , how can I reference tab’s index in app.component.ts so that when tab page selected from the side menu, it slides to that tab page (just like ionic-conference-app) tab and sidemenu based. I tried @ViewChild(SuperTabs) superTabs: SuperTabs; and openPage(page) { this.superTabs.slideTo(page.index) } but it didn’t work throwing error Cannot read property 'slideTo' of undefined.


#117

Hi did u got any solution for this?? am also facing the same issue


#118

I’m also having this issue. Did you guys figured it out?

@aravindemc2 @yasirpanjsheri


#119

yes. I already added scrollTabs but it does not seem work slide.
And I want to ask how can I add content without using root binding.
Thanks you.


#120

Sorry for the late reply @phyokyaw.

  1. It’s strange that super tabs does not slide if you added scrollTabs attribute in super-tabs element. It did work for me. Maybe the best way for you is to create a separate blank ionic 3 project and try if you can make super-tabs work in that new blank project.
  2. I have only tried using root with super-tabs, below is an example. <super-tab [root]="YOUR_SUBPAGE" [title]="YOUR_TITLE" [icon]="YOUR_ICON" [badge]="YOUR_BADGE" [rootParams]="PARAMETERS_YOU_WANT_TO_PASS_TO_THE_SUBPAGE">
    Sorry that I’m not sure how to assign multiple subpages within super-tab without [root] attribute.

#121

Hi. I implemented swipeable tabs and it works perfectly.
I’ve tried to use swipeable tabs and ion-refresher and I had to get rid of refresher because the user experience was very bad. When you want to slide it also refrehes the page. How can I solve this?


#122

Rocks. this should be integrated to the default Ionic Component. Good job!