javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): fullscreen

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-11-20 23:12:57 +01:00
parent 89aff89b7d
commit fbfa9d471f
5 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/app/app.scss
View File

@ -235,7 +235,7 @@ ion-page,
width: 100%; width: 100%;
height: 100%; height: 100%;
contain: strict; contain: layout size style;
} }
// Page Container Structure // Page Container Structure

6
packages/core/src/components/content/content.tsx
View File

@ -87,8 +87,10 @@ export class Content {
return; return;
} }
if (this.fullscreen) { if (this.fullscreen) {
Context.dom.read(this.readDimensions.bind(this)); Context.dom.raf(() => {
Context.dom.write(this.writeDimensions.bind(this)); Context.dom.read(this.readDimensions.bind(this));
Context.dom.write(this.writeDimensions.bind(this));
});
} else { } else {
this.cTop = this.cBottom = null; this.cTop = this.cBottom = null;
Context.dom.write(() => this.scrollEl.removeAttribute('style')); Context.dom.write(() => this.scrollEl.removeAttribute('style'));

2
packages/core/src/components/tabs/page-tab.tsx
View File

@ -39,7 +39,7 @@ export class PageTab {
<ion-title>Tab page</ion-title> <ion-title>Tab page</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header>, </ion-header>,
<ion-content> <ion-content fullscreen={true}>
<p> <p>
<h2>Set tabbar layout</h2> <h2>Set tabbar layout</h2>
<ion-button onClick={() => this.setLayout('icon-top')}>icon-top</ion-button> <ion-button onClick={() => this.setLayout('icon-top')}>icon-top</ion-button>

4
packages/core/src/components/tabs/tabs.scss
View File

@ -12,7 +12,7 @@ ion-tabs {
flex: 1; flex: 1;
contain: strict; contain: layout size style;
} }
ion-tab { ion-tab {
@ -25,7 +25,7 @@ ion-tab {
width: 100%; width: 100%;
height: 100%; height: 100%;
contain: strict; contain: layout size style;
} }
ion-tab.show-tab { ion-tab.show-tab {

4
packages/core/src/utils/helpers.ts
View File

@ -139,6 +139,10 @@ export function getParentElement(elm: any) {
} }
export function getPageElement(el: HTMLElement) { export function getPageElement(el: HTMLElement) {
const tabs = el.closest('ion-tabs');
if (tabs) {
return tabs;
}
const page = el.closest('ion-page,.ion-page,page-inner'); const page = el.closest('ion-page,.ion-page,page-inner');
if (page) { if (page) {
return page; return page;