tabs over tabs

This commit is contained in:
Adam Bradley
2015-04-09 09:50:44 -05:00
parent 44328137d1
commit e3ba98b7b8
4 changed files with 32 additions and 12 deletions

View File

@ -15,6 +15,22 @@ html {
.nav-viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-viewport.tab {
position: relative;
}
.nav-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@ -29,6 +45,14 @@ html {
@include flex(1);
}
.view-cover {
height: 100vh !important;
.tab-bar {
z-index: 1
}
}
.pane > .pane-container {
position: relative;
overflow: hidden;

View File

@ -3,13 +3,8 @@ $transition-duration: 1000ms;
.nav-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
&.shown {
display: block;
}

View File

@ -1,4 +1,4 @@
import {NgElement, Component, Template, Parent, For} from 'angular2/angular2'
import {NgElement, Component, Template, For} from 'angular2/angular2'
import {IonicComponent} from 'ionic2/config/component'
@Component({
@ -19,14 +19,15 @@ import {IonicComponent} from 'ionic2/config/component'
class="tab-bar-item"
[class.tab-active]="tab.isSelected"
(^click)="onClickTabItem($event, tab)">
<icon class="tab-bar-item-icon ion-home" [hidden]="tabBarIcons=='none'"></icon>
<icon class="tab-bar-item-icon ion-home"
[hidden]="tabBarIcons=='none'"
[class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
[class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
</a>
</div>
</div>
<div class="pane-container tabs-container">
<content></content>
</div>
`,
directives: [For]
})

View File

@ -97,7 +97,7 @@ class Tab2Page1 {
<ion-aside side="left" [content]="view">
Left aside for Tab 2 Page 2
</ion-aside>
<ion-tabs #view>
<ion-tabs #view class="view-cover">
<ion-tab tab-title="Nested Tab 1">
<ion-view nav-title="Nested Tab 1">
<ion-content class="padding">