mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
docs()
This commit is contained in:
@ -2,7 +2,19 @@ import {NavParams} from './nav-controller';
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* You can access various features and information about the current view
|
* @name ViewController
|
||||||
|
* @description
|
||||||
|
* Access various features and information about the current view
|
||||||
|
* @usage
|
||||||
|
* ```ts
|
||||||
|
* import {Page, ViewController} from 'ionic/ionic';
|
||||||
|
* @Page....
|
||||||
|
* export class MyPage{
|
||||||
|
* constructor(viewCtrl: ViewController){
|
||||||
|
* this.viewCtrl = viewCtrl;
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
*/
|
*/
|
||||||
export class ViewController {
|
export class ViewController {
|
||||||
|
|
||||||
|
@ -14,6 +14,8 @@ import {Scroll} from '../scroll/scroll';
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* @name Slides
|
||||||
|
* @description
|
||||||
* Slides is a slide box implementation based on Swiper.js
|
* Slides is a slide box implementation based on Swiper.js
|
||||||
*
|
*
|
||||||
* Swiper.js:
|
* Swiper.js:
|
||||||
@ -27,6 +29,41 @@ import {Scroll} from '../scroll/scroll';
|
|||||||
*
|
*
|
||||||
* Licensed under MIT
|
* Licensed under MIT
|
||||||
*
|
*
|
||||||
|
* @usage
|
||||||
|
* ```ts
|
||||||
|
* @Page({
|
||||||
|
* template: `
|
||||||
|
* <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||||
|
* <ion-slide>
|
||||||
|
* <h3>Thank you for choosing the Awesome App!</h3>
|
||||||
|
* <p>
|
||||||
|
* The number one app for everything awesome.
|
||||||
|
* </p>
|
||||||
|
* </ion-slide>
|
||||||
|
* <ion-slide>
|
||||||
|
* <h3>Using Awesome</h3>
|
||||||
|
* <div id="list">
|
||||||
|
* <h5>Just three steps:</h5>
|
||||||
|
* <ol>
|
||||||
|
* <li>Be awesome</li>
|
||||||
|
* <li>Stay awesome</li>
|
||||||
|
* <li>There is no step 3</li>
|
||||||
|
* </ol>
|
||||||
|
* </div>
|
||||||
|
* </ion-slide>
|
||||||
|
* <ion-slide>
|
||||||
|
* <h3>Any questions?</h3>
|
||||||
|
* </ion-slide>
|
||||||
|
* </ion-slides>
|
||||||
|
* `
|
||||||
|
*})
|
||||||
|
*
|
||||||
|
*```
|
||||||
|
* @property {Any} [autoplay] - whether or not the slides should automatically change
|
||||||
|
* @property {Any} [loop] - whether the slides should loop from the last slide back to the first
|
||||||
|
* @property {Any} [bounce] - whether the slides should bounce
|
||||||
|
* @property [pager] - add this property to enable the slide pager
|
||||||
|
* @property {Any} [slideChanged] - expression to evaluate when a slide has been changed
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ion-slides',
|
selector: 'ion-slides',
|
||||||
@ -56,7 +93,7 @@ import {Scroll} from '../scroll/scroll';
|
|||||||
export class Slides extends Ion {
|
export class Slides extends Ion {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TODO
|
* @private
|
||||||
* @param {ElementRef} elementRef TODO
|
* @param {ElementRef} elementRef TODO
|
||||||
*/
|
*/
|
||||||
constructor(elementRef: ElementRef, config: Config) {
|
constructor(elementRef: ElementRef, config: Config) {
|
||||||
@ -67,6 +104,10 @@ export class Slides extends Ion {
|
|||||||
|
|
||||||
this.slideChanged = new EventEmitter('slideChanged');
|
this.slideChanged = new EventEmitter('slideChanged');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onInit() {
|
onInit() {
|
||||||
if(!this.options) {
|
if(!this.options) {
|
||||||
this.options = {};
|
this.options = {};
|
||||||
@ -133,16 +174,31 @@ export class Slides extends Ion {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTap(swiper, e) {
|
onTap(swiper, e) {
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onClick(swiper, e) {
|
onClick(swiper, e) {
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onDoubleTap(swiper, e) {
|
onDoubleTap(swiper, e) {
|
||||||
|
|
||||||
this.toggleZoom(swiper, e);
|
this.toggleZoom(swiper, e);
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onLazyImageLoad(swiper, slide, img) {
|
onLazyImageLoad(swiper, slide, img) {
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onLazyImageReady(swiper, slide, img) {
|
onLazyImageReady(swiper, slide, img) {
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -155,6 +211,9 @@ export class Slides extends Ion {
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
initZoom() {
|
initZoom() {
|
||||||
this.zoomDuration = this.zoomDuration || 230;
|
this.zoomDuration = this.zoomDuration || 230;
|
||||||
this.maxScale = this.zoomMax || 3;
|
this.maxScale = this.zoomMax || 3;
|
||||||
@ -218,6 +277,9 @@ export class Slides extends Ion {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
resetZoom() {
|
resetZoom() {
|
||||||
|
|
||||||
if(this.zoomElement) {
|
if(this.zoomElement) {
|
||||||
@ -231,6 +293,9 @@ export class Slides extends Ion {
|
|||||||
this.zoomLastPosY = 0;
|
this.zoomLastPosY = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
toggleZoom(swiper, e) {
|
toggleZoom(swiper, e) {
|
||||||
console.log('Try toggle zoom');
|
console.log('Try toggle zoom');
|
||||||
if(!this.enableZoom) { return; }
|
if(!this.enableZoom) { return; }
|
||||||
@ -305,11 +370,21 @@ export class Slides extends Ion {
|
|||||||
this.scale = this.maxScale;
|
this.scale = this.maxScale;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTransitionStart(swiper) {
|
onTransitionStart(swiper) {
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTransitionEnd(swiper) {
|
onTransitionEnd(swiper) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTouchStart(e) {
|
onTouchStart(e) {
|
||||||
console.log('Touch start', e);
|
console.log('Touch start', e);
|
||||||
|
|
||||||
@ -335,6 +410,9 @@ export class Slides extends Ion {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTouchMove(e) {
|
onTouchMove(e) {
|
||||||
this.touch.deltaX = e.touches[0].clientX - this.touch.startX;
|
this.touch.deltaX = e.touches[0].clientX - this.touch.startX;
|
||||||
this.touch.deltaY = e.touches[0].clientY - this.touch.startY;
|
this.touch.deltaY = e.touches[0].clientY - this.touch.startY;
|
||||||
@ -384,6 +462,10 @@ export class Slides extends Ion {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
onTouchEnd(e) {
|
onTouchEnd(e) {
|
||||||
console.log('PANEND', e);
|
console.log('PANEND', e);
|
||||||
|
|
||||||
@ -412,9 +494,11 @@ export class Slides extends Ion {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* @private
|
||||||
* Update the underlying slider implementation. Call this if you've added or removed
|
* Update the underlying slider implementation. Call this if you've added or removed
|
||||||
* child slides.
|
* child slides.
|
||||||
*/
|
*/
|
||||||
|
*/
|
||||||
update() {
|
update() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.slider.update();
|
this.slider.update();
|
||||||
@ -426,32 +510,58 @@ export class Slides extends Ion {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
next() {
|
next() {
|
||||||
this.slider.slideNext();
|
this.slider.slideNext();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
prev() {
|
prev() {
|
||||||
this.slider.slidePrev();
|
this.slider.slidePrev();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
getIndex() {
|
getIndex() {
|
||||||
return this.slider.activeIndex;
|
return this.slider.activeIndex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
getNumSlides() {
|
getNumSlides() {
|
||||||
return this.slider.slides.length;
|
return this.slider.slides.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
isAtEnd() {
|
isAtEnd() {
|
||||||
return this.slider.isEnd;
|
return this.slider.isEnd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
isAtBeginning() {
|
isAtBeginning() {
|
||||||
return this.slider.isBeginning;
|
return this.slider.isBeginning;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
getSliderWidget() {
|
getSliderWidget() {
|
||||||
return this.slider;
|
return this.slider;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TODO
|
* @private
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ion-slide',
|
selector: 'ion-slide',
|
||||||
@ -475,6 +585,9 @@ export class Slide {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @priavte
|
||||||
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: 'slide-lazy',
|
selector: 'slide-lazy',
|
||||||
})
|
})
|
||||||
|
@ -33,9 +33,10 @@ class MediaSwitch {
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag.
|
* @name Switch
|
||||||
*
|
* @description
|
||||||
* Toggles can also have colors assigned to them, by adding the `toggle-assertive` attribute to assign the assertive color.
|
* A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
|
||||||
|
* Switches can also have colors assigned to them, by adding any color attribute to them.
|
||||||
*
|
*
|
||||||
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
|
||||||
*
|
*
|
||||||
|
@ -109,6 +109,9 @@ export class Toolbar extends ToolbarBase {
|
|||||||
* </ion-navbar>
|
* </ion-navbar>
|
||||||
*
|
*
|
||||||
*<!-- or if you wanted to crate a subheader title-->
|
*<!-- or if you wanted to crate a subheader title-->
|
||||||
|
* <ion-navbar *navbar>
|
||||||
|
* <ion-title>Tab 1</ion-title>
|
||||||
|
* </ion-navbar>
|
||||||
* <ion-toolbar>
|
* <ion-toolbar>
|
||||||
* <ion-title>SubHeader</ion-title>
|
* <ion-title>SubHeader</ion-title>
|
||||||
* </ion-toolbar>
|
* </ion-toolbar>
|
||||||
|
@ -7,6 +7,9 @@
|
|||||||
* for temporary data as it may be "cleaned up" by the operation system
|
* for temporary data as it may be "cleaned up" by the operation system
|
||||||
* during low disk space situations.
|
* during low disk space situations.
|
||||||
*/
|
*/
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
export class Storage {
|
export class Storage {
|
||||||
constructor(strategyCls: StorageEngine, options) {
|
constructor(strategyCls: StorageEngine, options) {
|
||||||
this._strategy = new strategyCls(options);
|
this._strategy = new strategyCls(options);
|
||||||
@ -33,6 +36,9 @@ export class Storage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
export class StorageEngine {
|
export class StorageEngine {
|
||||||
get(key, value) {
|
get(key, value) {
|
||||||
throw Error("get() not implemented for this storage engine");
|
throw Error("get() not implemented for this storage engine");
|
||||||
|
Reference in New Issue
Block a user