mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
tabs over tabs
This commit is contained in:
@ -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;
|
||||
|
@ -3,13 +3,8 @@ $transition-duration: 1000ms;
|
||||
|
||||
|
||||
.nav-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
|
||||
&.shown {
|
||||
display: block;
|
||||
}
|
||||
|
@ -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]
|
||||
})
|
||||
|
@ -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">
|
||||
|
Reference in New Issue
Block a user