mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
docs(content): update content docs
This commit is contained in:
@ -1,14 +1,13 @@
|
|||||||
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, AfterViewInit, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
|
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, OnInit, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
|
||||||
|
|
||||||
import { App } from '../app/app';
|
import { App } from '../app/app';
|
||||||
import { Config } from '../../config/config';
|
import { Config } from '../../config/config';
|
||||||
import { DomController } from '../../util/dom-controller';
|
import { DomController } from '../../util/dom-controller';
|
||||||
import { eventOptions } from '../../util/ui-event-manager';
|
|
||||||
import { Img } from '../img/img';
|
import { Img } from '../img/img';
|
||||||
import { Ion } from '../ion';
|
import { Ion } from '../ion';
|
||||||
import { isTrueProperty, assert, removeArrayItem } from '../../util/util';
|
import { isTrueProperty, assert, removeArrayItem } from '../../util/util';
|
||||||
import { Keyboard } from '../../util/keyboard';
|
import { Keyboard } from '../../util/keyboard';
|
||||||
import { ScrollView, ScrollDirection } from '../../util/scroll-view';
|
import { ScrollView, ScrollDirection, ScrollEvent } from '../../util/scroll-view';
|
||||||
import { Tabs } from '../tabs/tabs';
|
import { Tabs } from '../tabs/tabs';
|
||||||
import { transitionEnd } from '../../util/dom';
|
import { transitionEnd } from '../../util/dom';
|
||||||
import { ViewController } from '../../navigation/view-controller';
|
import { ViewController } from '../../navigation/view-controller';
|
||||||
@ -116,85 +115,92 @@ export { ScrollEvent, ScrollDirection } from '../../util/scroll-view';
|
|||||||
'</div>' +
|
'</div>' +
|
||||||
'<ng-content select="ion-refresher"></ng-content>',
|
'<ng-content select="ion-refresher"></ng-content>',
|
||||||
host: {
|
host: {
|
||||||
'[class.statusbar-padding]': '_sbPadding'
|
'[class.statusbar-padding]': 'statusbarPadding'
|
||||||
},
|
},
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class Content extends Ion implements AfterViewInit, OnDestroy {
|
export class Content extends Ion implements OnDestroy, OnInit {
|
||||||
/* @private */
|
/** @internal */
|
||||||
_sbPadding: boolean;
|
|
||||||
|
|
||||||
/* @internal */
|
|
||||||
_cTop: number;
|
_cTop: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_cBottom: number;
|
_cBottom: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_pTop: number;
|
_pTop: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_pRight: number;
|
_pRight: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_pBottom: number;
|
_pBottom: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_pLeft: number;
|
_pLeft: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_scrollPadding: number = 0;
|
_scrollPadding: number = 0;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_hdrHeight: number;
|
_hdrHeight: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_ftrHeight: number;
|
_ftrHeight: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_tabbarHeight: number;
|
_tabbarHeight: number;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_tabsPlacement: string;
|
_tabsPlacement: string;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_inputPolling: boolean = false;
|
_inputPolling: boolean = false;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_scroll: ScrollView;
|
_scroll: ScrollView;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_scLsn: Function;
|
_scLsn: Function;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_fullscreen: boolean;
|
_fullscreen: boolean;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_lazyLoadImages: boolean = true;
|
|
||||||
/* @internal */
|
|
||||||
_imgs: Img[] = [];
|
_imgs: Img[] = [];
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_footerEle: HTMLElement;
|
_footerEle: HTMLElement;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_dirty: boolean;
|
_dirty: boolean;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_scrollEle: HTMLElement;
|
_scrollEle: HTMLElement;
|
||||||
/* @internal */
|
/** @internal */
|
||||||
_fixedEle: HTMLElement;
|
_fixedEle: HTMLElement;
|
||||||
|
|
||||||
|
/** @private */
|
||||||
|
statusbarPadding: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A number representing how many pixels the top of the content has been
|
* A number representing how many pixels the top of the content has been
|
||||||
* adjusted, which could be by either padding or margin.
|
* adjusted, which could be by either padding or margin.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
contentTop: number;
|
contentTop: number;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A number representing how many pixels the bottom of the content has been
|
* A number representing how many pixels the bottom of the content has been
|
||||||
* adjusted, which could be by either padding or margin.
|
* adjusted, which could be by either padding or margin.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
contentBottom: number;
|
contentBottom: number;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The height the content, including content not visible
|
* The height the content, including content not visible
|
||||||
* on the screen due to overflow.
|
* on the screen due to overflow.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
scrollHeight: number = 0;
|
scrollHeight: number = 0;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The width the content, including content not visible
|
* The width the content, including content not visible
|
||||||
* on the screen due to overflow.
|
* on the screen due to overflow.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
scrollWidth: number = 0;
|
scrollWidth: number = 0;
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The distance of the content's top to its topmost visible content.
|
* The distance of the content's top to its topmost visible content.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
get scrollTop(): number {
|
get scrollTop(): number {
|
||||||
return this._scroll.getTop();
|
return this._scroll.getTop();
|
||||||
@ -205,6 +211,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* The distance of the content's left to its leftmost visible content.
|
* The distance of the content's left to its leftmost visible content.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
get scrollLeft(): number {
|
get scrollLeft(): number {
|
||||||
return this._scroll.getLeft();
|
return this._scroll.getLeft();
|
||||||
@ -215,6 +223,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* If the scrollable area is actively scrolling or not.
|
* If the scrollable area is actively scrolling or not.
|
||||||
|
*
|
||||||
|
* @return {boolean}
|
||||||
*/
|
*/
|
||||||
get isScrolling(): boolean {
|
get isScrolling(): boolean {
|
||||||
return this._scroll.isScrolling;
|
return this._scroll.isScrolling;
|
||||||
@ -222,6 +232,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* The current vertical scroll velocity.
|
* The current vertical scroll velocity.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
get velocityY(): number {
|
get velocityY(): number {
|
||||||
return this._scroll.ev.velocityY || 0;
|
return this._scroll.ev.velocityY || 0;
|
||||||
@ -229,6 +241,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* The current horizontal scroll velocity.
|
* The current horizontal scroll velocity.
|
||||||
|
*
|
||||||
|
* @return {number}
|
||||||
*/
|
*/
|
||||||
get velocityX(): number {
|
get velocityX(): number {
|
||||||
return this._scroll.ev.velocityX || 0;
|
return this._scroll.ev.velocityX || 0;
|
||||||
@ -236,6 +250,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* The current, or last known, vertical scroll direction.
|
* The current, or last known, vertical scroll direction.
|
||||||
|
*
|
||||||
|
* @return {ScrollDirection}
|
||||||
*/
|
*/
|
||||||
get directionY(): ScrollDirection {
|
get directionY(): ScrollDirection {
|
||||||
return this._scroll.ev.directionY;
|
return this._scroll.ev.directionY;
|
||||||
@ -243,25 +259,27 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* The current, or last known, horizontal scroll direction.
|
* The current, or last known, horizontal scroll direction.
|
||||||
|
*
|
||||||
|
* @return {ScrollDirection}
|
||||||
*/
|
*/
|
||||||
get directionX(): ScrollDirection {
|
get directionX(): ScrollDirection {
|
||||||
return this._scroll.ev.directionX;
|
return this._scroll.ev.directionX;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @output {ScrollEvent} Emitted when the scrolling first starts.
|
||||||
*/
|
*/
|
||||||
@Output() ionScrollStart: EventEmitter<any> = new EventEmitter<any>();
|
@Output() ionScrollStart: EventEmitter<ScrollEvent> = new EventEmitter<ScrollEvent>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @output {ScrollEvent} Emitted on every scroll event.
|
||||||
*/
|
*/
|
||||||
@Output() ionScroll: EventEmitter<any> = new EventEmitter<any>();
|
@Output() ionScroll: EventEmitter<ScrollEvent> = new EventEmitter<ScrollEvent>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @output {ScrollEvent} Emitted when scrolling ends.
|
||||||
*/
|
*/
|
||||||
@Output() ionScrollEnd: EventEmitter<any> = new EventEmitter<any>();
|
@Output() ionScrollEnd: EventEmitter<ScrollEvent> = new EventEmitter<ScrollEvent>();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
@ -287,7 +305,7 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
) {
|
) {
|
||||||
super(config, elementRef, renderer, 'content');
|
super(config, elementRef, renderer, 'content');
|
||||||
|
|
||||||
this._sbPadding = config.getBoolean('statusbarPadding', false);
|
this.statusbarPadding = config.getBoolean('statusbarPadding', false);
|
||||||
|
|
||||||
if (viewCtrl) {
|
if (viewCtrl) {
|
||||||
viewCtrl._setIONContent(this);
|
viewCtrl._setIONContent(this);
|
||||||
@ -300,7 +318,7 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
ngAfterViewInit() {
|
ngOnInit() {
|
||||||
if (this._scrollEle) return;
|
if (this._scrollEle) return;
|
||||||
|
|
||||||
const children = this._elementRef.nativeElement.children;
|
const children = this._elementRef.nativeElement.children;
|
||||||
@ -342,68 +360,6 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
this._scrollEle = this._fixedEle = this._footerEle = this._scLsn = this._scroll = null;
|
this._scrollEle = this._fixedEle = this._footerEle = this._scLsn = this._scroll = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addTouchStartListener(handler: any) {
|
|
||||||
return this._addListener('touchstart', handler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addTouchMoveListener(handler: any) {
|
|
||||||
return this._addListener('touchmove', handler, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addTouchEndListener(handler: any) {
|
|
||||||
return this._addListener('touchend', handler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addMouseDownListener(handler: any) {
|
|
||||||
return this._addListener('mousedown', handler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addMouseUpListener(handler: any) {
|
|
||||||
return this._addListener('mouseup', handler, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
addMouseMoveListener(handler: any) {
|
|
||||||
return this._addListener('mousemove', handler, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
_addListener(type: string, handler: any, usePassive: boolean): Function {
|
|
||||||
assert(handler, 'handler must be valid');
|
|
||||||
assert(this._scrollEle, '_scrollEle must be valid');
|
|
||||||
|
|
||||||
const opts = eventOptions(false, usePassive);
|
|
||||||
|
|
||||||
// ensure we're not creating duplicates
|
|
||||||
this._scrollEle.removeEventListener(type, handler, opts);
|
|
||||||
this._scrollEle.addEventListener(type, handler, opts);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (this._scrollEle) {
|
|
||||||
this._scrollEle.removeEventListener(type, handler, opts);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
@ -444,6 +400,7 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Scroll to the bottom of the content component.
|
* Scroll to the bottom of the content component.
|
||||||
|
*
|
||||||
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
|
* @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
|
||||||
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
|
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
|
||||||
*/
|
*/
|
||||||
@ -466,6 +423,8 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
* fullscreen option may not look any different than the default, however,
|
* fullscreen option may not look any different than the default, however,
|
||||||
* by adding a transparency effect to a header then the content can be
|
* by adding a transparency effect to a header then the content can be
|
||||||
* seen under the header as the user scrolls.
|
* seen under the header as the user scrolls.
|
||||||
|
*
|
||||||
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
@Input()
|
@Input()
|
||||||
get fullscreen(): boolean {
|
get fullscreen(): boolean {
|
||||||
@ -475,17 +434,6 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
this._fullscreen = isTrueProperty(val);
|
this._fullscreen = isTrueProperty(val);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
@Input()
|
|
||||||
get lazyLoadImages(): boolean {
|
|
||||||
return !!this._lazyLoadImages;
|
|
||||||
}
|
|
||||||
set lazyLoadImages(val: boolean) {
|
|
||||||
this._lazyLoadImages = isTrueProperty(val);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
@ -720,7 +668,7 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollEle = this._scrollEle as any;
|
const scrollEle = this._scrollEle;
|
||||||
if (!scrollEle) {
|
if (!scrollEle) {
|
||||||
assert(false, 'this._scrollEle should be valid');
|
assert(false, 'this._scrollEle should be valid');
|
||||||
return;
|
return;
|
||||||
@ -809,6 +757,9 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
isImgsRefreshable() {
|
isImgsRefreshable() {
|
||||||
return Math.abs(this.velocityY) < 3;
|
return Math.abs(this.velocityY) < 3;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user