Last active
January 15, 2019 00:06
-
-
Save 0x1ad2/e32859546b1bfeff5c55ceddf221e5b2 to your computer and use it in GitHub Desktop.
A service to hide and show tabs in Ionic 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Injectable} from '@angular/core'; | |
// Declare TabsService as a provider in app.module.ts | |
// Inject TabsService in your class: constructor(public tabs: TabsService){} | |
// Use the this.tabs.hide() or this.tabs.show() methods wherever you want | |
@Injectable() | |
export class TabsService { | |
constructor() {} | |
public hide() { | |
let tabs = document.querySelectorAll('.tabbar'); | |
let scrollContent = document.querySelectorAll('.scroll-content'); | |
if (tabs !== null) { | |
Object.keys(tabs).map((key) => { | |
tabs[key].style.transform = 'translateY(56px)'; | |
}); | |
// fix for removing the margin if you got scorllable content | |
setTimeout(() =>{ | |
Object.keys(scrollContent).map((key) => { | |
scrollContent[key].style.marginBottom = '0'; | |
}); | |
}) | |
} | |
} | |
public show() { | |
let tabs = document.querySelectorAll('.tabbar'); | |
if (tabs !== null) { | |
Object.keys(tabs).map((key) => { | |
tabs[key].style.transform = 'translateY(0px)'; | |
}); | |
} | |
} | |
} |
Pretty nice, thanks!
sorry, can u help me ? i get this error Uncaught TypeError: Cannot set property 'marginBottom' of undefined
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great! it works like a charm. Thanks, you save my day