mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
tab structure updates
This commit is contained in:
@ -14,7 +14,7 @@ html {
|
||||
padding: 0;
|
||||
|
||||
.nav-viewport {
|
||||
// container of many nav-views, which each contain one view
|
||||
// container of many .nav-views, each .nav-view contains one view
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -22,18 +22,9 @@ html {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
@include flex-display();
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.toolbar-container {
|
||||
@ -43,21 +34,42 @@ html {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
// one view's toolbar, sibling to many view toolbars insde of .toolbar-container
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-pane-container {
|
||||
// container of many .nav-pane's, each one containing one view
|
||||
position: relative;
|
||||
@include flex(1);
|
||||
}
|
||||
|
||||
.tab-pane-container {
|
||||
// container of each content for each tab component within a tabs component
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-pane {
|
||||
// container of one view
|
||||
// container of one .pane,
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.nav-pane-cover-parent {
|
||||
// .nav-pane that should completely cover siblings and parent
|
||||
top: -50px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.pane {
|
||||
// user created view, contained by .nav-pane
|
||||
position: absolute;
|
||||
|
@ -21,23 +21,11 @@ import {IonicComponent} from 'ionic2/config/component'
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
|
||||
<header class="toolbar-container">
|
||||
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
|
||||
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
|
||||
</header>
|
||||
|
||||
<nav class="nav-tab-bar">
|
||||
<!-- SHARED TAB BAR FOR EACH TAB CONTAINER -->
|
||||
|
||||
</nav>
|
||||
|
||||
<div class="nav-pane-container">
|
||||
<!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
|
||||
<!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
|
||||
<section class="nav-pane" *for="#item of getRawNavStack()" [item]="item"></section>
|
||||
</div>
|
||||
|
||||
`,
|
||||
directives: [For, NavPane]
|
||||
})
|
||||
|
@ -11,9 +11,12 @@ import {IonicComponent} from 'ionic2/config/component'
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
<div class="tab-bar"
|
||||
[class.tab-bar-top]="placement=='top'"
|
||||
[class.tab-bar-bottom]="placement=='bottom'">
|
||||
<header class="toolbar-container">
|
||||
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
|
||||
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
|
||||
</header>
|
||||
|
||||
<nav class="tab-bar">
|
||||
<div class="tab-bar-container">
|
||||
<a *for="#tab of tabs"
|
||||
class="tab-bar-item"
|
||||
@ -26,8 +29,11 @@ import {IonicComponent} from 'ionic2/config/component'
|
||||
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="tab-pane-container">
|
||||
<content></content>
|
||||
</section>
|
||||
`,
|
||||
directives: [For]
|
||||
})
|
||||
@ -36,7 +42,11 @@ export class Tabs {
|
||||
@NgElement() ngElement: NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('pane')
|
||||
|
||||
// should be used to cover up sibling .nav-pane's and it's parent
|
||||
this.domElement.classList.add('nav-pane-cover-parent')
|
||||
|
||||
// .tab-bar-top/bottom should be added to the entire element when specified
|
||||
|
||||
this.config = Tabs.config.invoke(this)
|
||||
this.tabs = []
|
||||
|
@ -2,12 +2,22 @@
|
||||
// Tabs
|
||||
// --------------------------------------------------
|
||||
|
||||
$tab-bar-min-height: 66px !default;
|
||||
$tab-bar-background-color: #f7f7f8 !default;
|
||||
$tab-bar-item-padding: 10px !default;
|
||||
$tab-bar-item-min-width: 100px !default;
|
||||
|
||||
|
||||
.toolbar.tab-bar {
|
||||
.tabs {
|
||||
@include flex-display();
|
||||
@include flex-direction(column);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
@include flex-justify-content(center);
|
||||
min-height: $tab-bar-min-height;
|
||||
background: $tab-bar-background-color;
|
||||
}
|
||||
|
||||
.tab-bar-container {
|
||||
|
@ -30,7 +30,7 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
|
||||
<content select="ion-nav-items[side=secondary]"></content>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shared-toolbar"></div>`,
|
||||
`,
|
||||
directives: [BackButton]
|
||||
})
|
||||
export class Toolbar {
|
||||
|
@ -71,11 +71,3 @@ $toolbar-background: #f7f7f8 !default;
|
||||
@include flex-order(4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.shared-toolbar {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: red;
|
||||
}
|
||||
|
Reference in New Issue
Block a user