Ionic Swipeable Tabs are now here!

showcase
61

Congrats on the great work, hats off to you.
I have one tab with google maps, is it possible to get the slide to work with the map in some good way or should I turn it off for the page.

62

It’s possible but the feature isn’t implemented at the moment.

63

That would be a lovely feature to have.

64

Hi,
I have an issue with using custom font.

If I use it, it will break the design of tabs (but only on iOS). If I use default font (no custom font is set), everything is working. Below is example what it is doing - White space after last tab, indicator overlaps the tab.

I tried to use custom font on example project of tabs, and it do it too.

Can you please look at it?

Thanks

image

EDIT: It is doing when I set scrollTabs… Please help. It is i big bug for me :-/

1 Like
65

No one? It is very frustrating… :-/

66

Share with me a minimal project that reproduces this issue and I’ll have a
look. You can send it via a direct message if you prefer.

67

Thanks.
Already fixed during trying to find out what is wrong. I set initial CSS to the indicator and now it works correct.
CSS I have added:

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

with super-tab tabIcon is not working. I used ‘icon’ instead. It’s working :slight_smile:

1 Like
69

Hey I was wondering if there was a way to set platform specific styling to super tabs in the same way that you can in the
app.module file.

For example, something like:

      platforms: {
        ios: {
          statusbarPadding: true,
        },
        android: {
          tabsPlacement: 'top',
          tabsLayout: 'icon-bottom',
          tabsHighlight: 'true'
        }
      }
    }),
70

Hi,
this tabs works in Ionic 3?

71

No, it’s not possible. You will have to do it manually by doing something like this:

@Component({
  ...
  template: '<super-tabs [someConfig]='someConfig'> ... </super-tabs>'
})
export class MyPage {
  
  someConfig: any;
  
  constructor(platform: Platform) { 
    if (platform.is('ios')) {
      this.someConfig = 'some value';
    } else {
      this.someConfig = 'some other value';
    }
  }

}
72

Yes. In fact the latest version of the module only works with Ionic 3.

1 Like
73

I’m not sure if it’s me or something else but I try it but it doesn’t seem very smooth. It doesn’t follow my finger all over the screen. It’s like there is a little lag or the animation stop at some point then it continues. It’s hard to explain with words. I really like this component but I hope the smoothness of the animation would be better.

74

How could be possible to do something similar to this?

 <super-tabs>
    <super-tab *ngFor="let section of sections" [root]="sectionPage" [rootParams]="section" title="section.title"></super-tab>
 </super-tabs>

I would like to obtain the title of the tab stored in a collection.

75

Yes, its possible.

You just need to add *ngIf=“sections” on the main super-tabs element. This
makes sure that we’re only rendering the supertabs when your data is ready.

76

beginner only, is it possible to have ion-tabs and super-tabs at the same time ?
how

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

<super-tabs id="mainTabs" selectedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)" scrollTabs="true">
  <super-tab [root]="tab1Root" title="First page"  id="homeTab"></super-tab>
  <super-tab [root]="tab2Root" title="Second page" id="locationTab"></super-tab>
  <super-tab [root]="tab3Root" title="Third page"  id="favouritesTab"></super-tab>
  ...
</super-tabs>
77

I’m not sure. I haven’t tested it personally. I remember someone on Github
did test it and it worked for them.

78

A post was split to a new topic: Super-Tabs: ERROR Error: Uncaught (in promise): invalid views to insert

79

help help

git clone https://github.com/zyra/ionic2-super-tabs-example
cd ionic2-super-tabs-example
git submodule init
git submodule update
npm i
ionic serve

git submodule update outputs like this

Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of ‘git@github.com:zyra/ionic2-super-tabs’ into submodule path ‘C:/Users/Asus/myFolder/ionic2-super-tabs-example/src/ionic2-super-tabs’ failed

80

swiping doesn’t work even though I used scrollTabs=“true”

help, need the correct usage of swipe functions enableTabSwipe, enableTabsSwipe and slideTo

the goal: Just want to have the tabs slide-able and swipeable at the same time