eltok-super-tabs
Advanced tools
Swipeable tabs that can be your main navigation, or just a part of your page.
To see this in action, checkout the example project here.
Due to the way this module is designed, some versions of the module might not work with all versios of the Ionic Framework. Refer to the following table to use the appropriate version. Also, some features in the later versions might not be available in the older versions of this module. This page only contains the latest documentation. For older documentation, look up the previous versions of the README.md file using Github.
| Ionic Framework Version | ionic2-super-tabs version |
|---|---|
| 3.5.2 - 3.6.x | ^4.0.1 |
| 3.5.0 | 3.0.2 |
| 3.4.x | 2.6.3 |
| 3.0.0 - 3.3.x | 2.0.0 - 2.6.3 |
| 2.x.x | 1.x.x |
<super-tabs>
<super-tab [root]="page1" title="First page"></super-tab>
<super-tab [root]="page2" title="Second page"></super-tab>
<super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>
npm i --save ionic2-super-tabs
Import SuperTabsModule.forRoot() in your app's main module
import { SuperTabsModule } from 'ionic2-super-tabs';
@NgModule({
...
imports: [
...
SuperTabsModule.forRoot()
],
...
})
export class AppModule {}
If your app uses lazy loading, you need to import SuperTabsModule in your shared module or child modules:
import { SuperTabsModule } from 'ionic2-super-tabs';
@NgModule({
...
imports: [
...
SuperTabsModule
],
...
})
export class SharedModule {}
super-tabs Component(optional) The index of the tab that is selected when the component is initialized. Defaults to 0.
(optional) The background color of the toolbar that contains the tab buttons. See colors for more information.
(optional) The color of the text and icons inside the toolbar. See colors for more information.
(optional) The color of the tab indicator. See colors for more information. Defaults to primary.
(optional) The color of the badge. See colors for more information. Defaults to primary.
(optional) Placement of the tabs buttons. Defaults to top.
(optional) Set to true to enable tab bar swiping. Useful if you have lots of tabs.
(optional) Unique instance ID. You will need this if you wish to use the SuperTabsController provider.
(optional) Advanced configuration.
| Param | Description | Default |
|---|---|---|
dragThreshold | The number of pixels that the user must swipe through before the drag event triggers. | 20 |
allowElementScroll | Allow elements inside tabs to be dragged before triggering the tab swipe event. | false |
maxDragAngle | The maximum angle that the user can drag at for the drag event to trigger. | 40 |
transitionEase | The transition timing function to use in animations. | 'cubic-bezier(0.35, 0, 0.25, 1)' |
transitionDuration | The duration of animations in milliseconds. | 300 |
sideMenu | Specify if there is a side menu in the parent view. This value can be set to 'left', 'right', or 'both'. | N/A |
sideMenuThreshold | The number of pixels from right/left where the side menu events are captured. Drag even will not trigger if the swipe started from these areas. | 50 |
shortSwipeDuration | The user has to swipe faster than the duration specified here for a short swipe event to trigger. Short swipes are quick swipes to change the tabs quickly. Set to 0 to disable this. | 300 |
tabSelectListen to this event to be notified when the user selects a tab. This event emits an object containing the index of the tab, as well as it's unique ID. See example below for more details.
All methods documented below under SuperTabsController can be applied directly to an instance. Here's an example:
export class MyPage {
@ViewChild(SuperTabs) superTabs: SuperTabs;
slideToIndex(index: number) {
this.superTabs.slideTo(index);
}
hideToolbar() {
this.superTabs.showToolbar(false);
}
}
super-tab ComponentThe root page for this tab
Note: The Parameter rootNavCtrl is added automatically to the NavParams, there is no need to add it manually.
(optional) An object containing the params you would like to pass to this tab's root page
(optional) The title of the tab to display in the ion-segment-button.
(optional) The name of the icon to display in the ion-segment-button. This has to be a valid ion-icon name.
(optional) The initial badge value. The number can be changed through the SuperTabsController provider.
(optional) A unique ID to be used if you wish to use the SuperTabsController provider to modify this tab.
SuperTabsController ProvidersetBadge(tabId: string, value: number, tabsId?: string): void
Set the badge value for a tab.
SuperTabs. Defaults to the first instance registered in memory.clearBadge(tabId: string, tabsId?: string): void
Clears the badge value for a tab.
SuperTabs. Defaults to the first instance registered in memory.increaseBadge(tabId: string, increaseBy: number = 1, tabsId?: string): void
Increase the badge for a tab by a value.
1.SuperTabs. Defaults to the first instance registered in memory.decreaseBadge(tabId: string, increaseBy: number = 1, tabsId?: string): void
Decrease the badge for a tab by a value.
1.SuperTabs. Defaults to the first instance registered in memory.enableTabsSwipe(enable: boolean, tabsId?: string): void
Enable/disable swiping.
SuperTabs. Defaults to the first instance registered in memory.enableTabSwipe(enable: boolean, tabId: string, tabsId?: string): void
Enable/disable swiping when the specified tab is the current active one.
SuperTabs. Defaults to the first instance registered in memory.showToolbar(show: boolean, tabsId?: string): void
Show/hide toolbar
SuperTabs. Defaults to the first instance registered in memory.slideTo(tabIndexOrId: string | number, tabsId?: string): void
Slide to a tab.
SuperTabs. Defaults to the first instance registered in memory.All color inputs takes color names like any other Ionic 2 component. Your color name must be defined in the $colors map in your variables.scss file.
Set avoid-super-tabs="true" attribute in HTML element for avoid swipe event.
Example when using the horizontal scroll bar inner super-tab Component
export class MyPage {
page1: any = Page1Page;
page2: any = Page2Page;
page3: any = Page3Page;
}
<super-tabs>
<super-tab [root]="page1" title="First page"></super-tab>
<super-tab [root]="page2" title="Second page"></super-tab>
<super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>
<super-tabs>
<super-tab [root]="page1" title="First page" icon="home"></super-tab>
<super-tab [root]="page2" title="Second page" icon="pin"></super-tab>
<super-tab [root]="page3" title="Third page" icon="heart"></super-tab>
</super-tabs>
export class MyPage {
page1: any = Page1Page;
page2: any = Page2Page;
page3: any = Page3Page;
constructor(private superTabsCtrl: SuperTabsController) { }
ngAfterViewInit() {
// must wait for AfterViewInit if you want to modify the tabs instantly
this.superTabsCtrl.setBadge('homeTab', 5);
}
hideToolbar() {
this.superTabsCtrl.showToolbar(false);
}
showToolbar() {
this.superTabsCtrl.showToolbar(true);
}
onTabSelect(ev: any) {
console.log('Tab selected', 'Index: ' + ev.index, 'Unique ID: ' + ev.id);
}
}
<super-tabs id="mainTabs" selectedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)">
<super-tab [root]="page1" title="First page" icon="home" id="homeTab"></super-tab>
<super-tab [root]="page2" title="Second page" icon="pin" id="locationTab"></super-tab>
<super-tab [root]="page3" title="Third page" icon="heart" id="favouritesTab"></super-tab>
</super-tabs>
If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile:
FAQs
Swipeable tabs module for Ionic 3 Apps
The npm package eltok-super-tabs receives a total of 0 weekly downloads. As such, eltok-super-tabs popularity was classified as not popular.
We found that eltok-super-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Sonar’s acquisition of Tidelift highlights a growing industry shift toward sustainable open source funding, addressing maintainer burnout and critical software dependencies.
Security News
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.