javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(content): add ion-fixed component and move from content

Browse Source
This commit is contained in:
Brandy Carney
2017-07-12 16:03:20 -04:00
parent 201821f2fd
commit 1ada75014e
5 changed files with 73 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/components/content/content.scss
View File

@ -62,24 +62,6 @@ ion-content.has-refresher ion-scroll {
background-color: inherit;
}
// Fixed Content (ion-fixed and ion-fab)
// --------------------------------------------------
.fixed-content {
@include position(0, 0, 0, 0);
position: absolute;
display: block;
}
[ion-fixed] {
position: absolute;
z-index: $z-index-fixed-content;
transform: translateZ(0);
}
// Content Padding
// --------------------------------------------------

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

@ -1,6 +1,6 @@
import { Component, h, Ionic, Prop } from '@stencil/core';
import { createThemedClasses } from '../../utils/theme';
import { getParentElement } from '../../utils/helpers';
import { getParentElement, getToolbarHeight } from '../../utils/helpers';
import { Scroll } from '../scroll/scroll-interface';
import { ScrollDetail } from '../../utils/interfaces';
@ -112,23 +112,3 @@ export class Content {
);
}
}
function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
for (var i = 0; i < pageChildren.length; i++) {
if (pageChildren[i].tagName === toolbarTagName) {
var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
if (headerHeight) {
return headerHeight;
}
if (mode === 'ios') {
return iosHeight;
}
return defaultHeight;
}
}
return '';
}

19
packages/core/src/components/fixed/fixed.scss Normal file
View File

@ -0,0 +1,19 @@
@import "../../themes/ionic.globals";
// Fixed Content (ion-fixed)
// --------------------------------------------------
ion-fixed {
@include position(0, 0, 0, 0);
position: absolute;
display: block;
}
[ion-fixed] {
position: absolute;
z-index: $z-index-fixed-content;
transform: translateZ(0);
}

34
packages/core/src/components/fixed/fixed.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Component, h, Ionic, VNodeData } from '@stencil/core';
import { getParentElement, getToolbarHeight } from '../../utils/helpers';
@Component({
tag: 'ion-fixed',
styleUrl: 'fixed.scss'
})
export class Fixed {
$el: HTMLElement;
mode: string;
hostData(): VNodeData {
const pageChildren: HTMLElement[] = getParentElement(this.$el).children;
const headerHeight = getToolbarHeight('ION-HEADER', pageChildren, this.mode, '44px', '56px');
const footerHeight = getToolbarHeight('ION-FOOTER', pageChildren, this.mode, '50px', '48px');
return {
class: {
'statusbar-padding': Ionic.config.getBoolean('statusbarPadding')
},
style: {
'margin-top': headerHeight,
'margin-bottom': footerHeight
}
};
}
render() {
return (
<slot></slot>
);
}
}

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

@ -93,3 +93,22 @@ export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: stri
}
}
}
export function getToolbarHeight(toolbarTagName: string, pageChildren: HTMLElement[], mode: string, iosHeight: string, defaultHeight: string) {
for (var i = 0; i < pageChildren.length; i++) {
if (pageChildren[i].tagName === toolbarTagName) {
var headerHeight = pageChildren[i].getAttribute(`${mode}-height`);
if (headerHeight) {
return headerHeight;
}
if (mode === 'ios') {
return iosHeight;
}
return defaultHeight;
}
}
return '';
}