chore(): fix tabs demo

This commit is contained in:
mhartington
2016-10-11 13:30:47 -04:00
parent 97426f8af4
commit ec8a395d61
2 changed files with 38 additions and 19 deletions

View File

@ -1,13 +1,33 @@
import { Component } from '@angular/core'; import { Component, ViewEncapsulation } from '@angular/core';
@Component({ @Component({
template: '<div>johnny utah</div>', template: '<div>johnny utah</div>',
selector: 'tab-page'
}) })
export class TabPage {} export class TabPage {}
@Component({ @Component({
templateUrl: 'page.html' templateUrl: 'page.html',
selector: 'api-demo-page',
encapsulation: ViewEncapsulation.None,
styles: [
`
ion-tabs {
margin-bottom: 20px;
}
`,
`
ion-tabs,
ion-tabs .tabbar {
position: relative;
top: auto;
height: auto;
visibility: visible;
opacity: 1;
}
`
]
}) })
export class ApiDemoPage { export class ApiDemoPage {
root = TabPage; root = TabPage;
@ -15,7 +35,8 @@ export class ApiDemoPage {
@Component({ @Component({
template: '<ion-nav [root]="root"></ion-nav>' template: '<ion-nav [root]="root"></ion-nav>',
selector: 'api-demo-app'
}) })
export class ApiDemoApp { export class ApiDemoApp {
root = ApiDemoPage; root = ApiDemoPage;

View File

@ -1,16 +1,14 @@
ion-tabs:first-child { ion-tabs:first-child {
margin-top: 60px; margin-top: 60px;
} }
ion-tabs {
ion-tabs { margin-bottom: 20px;
margin-bottom: 20px; }
} ion-tabs,
ion-tabs .tabbar {
ion-tabs, position: relative;
ion-tabs .tabbar { top: auto;
position: relative; height: auto;
top: auto; visibility: visible;
height: auto; opacity: 1;
visibility: visible; }
opacity: 1;
}