mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
docs() id, content, bootstrap, item, item-sliding
This commit is contained in:
@ -3,6 +3,8 @@ import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/core';
|
|||||||
import {IonicApp} from './app';
|
import {IonicApp} from './app';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* @name Id
|
||||||
|
* @description
|
||||||
* IdRef is an easy way to identify unique components in an app and access them
|
* IdRef is an easy way to identify unique components in an app and access them
|
||||||
* no matter where in the UI heirarchy you are. For example, this makes toggling
|
* no matter where in the UI heirarchy you are. For example, this makes toggling
|
||||||
* a global side menu feasible from any place in the application.
|
* a global side menu feasible from any place in the application.
|
||||||
@ -10,6 +12,7 @@ import {IonicApp} from './app';
|
|||||||
* See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of
|
* See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of
|
||||||
* the Component docs for an example of how Menus rely on ID's.
|
* the Component docs for an example of how Menus rely on ID's.
|
||||||
*
|
*
|
||||||
|
* @usage
|
||||||
* To give any component an ID, simply set its `id` property:
|
* To give any component an ID, simply set its `id` property:
|
||||||
* ```html
|
* ```html
|
||||||
* <ion-checkbox id="myCheckbox"></ion-checkbox>
|
* <ion-checkbox id="myCheckbox"></ion-checkbox>
|
||||||
@ -19,8 +22,13 @@ import {IonicApp} from './app';
|
|||||||
* service:
|
* service:
|
||||||
* ```ts
|
* ```ts
|
||||||
* constructor(app: IonicApp) {
|
* constructor(app: IonicApp) {
|
||||||
* var checkbox = app.getComponent("myCheckbox");
|
* this.app = app
|
||||||
* if (checkbox.checked) console.log('checkbox is checked');
|
* }
|
||||||
|
* ngAfterViewInit{
|
||||||
|
* var checkbox = this.app.getComponent("myCheckbox");
|
||||||
|
* if (checkbox.checked) {
|
||||||
|
* console.log('checkbox is checked');
|
||||||
|
* }
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
|
@ -19,7 +19,7 @@ import {ScrollTo} from '../../animations/scroll-to';
|
|||||||
*
|
*
|
||||||
* @usage
|
* @usage
|
||||||
* ```html
|
* ```html
|
||||||
* <ion-content>
|
* <ion-content id="myContent">
|
||||||
* Add your content here!
|
* Add your content here!
|
||||||
* </ion-content>
|
* </ion-content>
|
||||||
* ```
|
* ```
|
||||||
@ -58,7 +58,27 @@ export class Content extends Ion {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds the specified scroll handler to the content' scroll element.
|
* Adds the specified scroll handler to the content' scroll element.
|
||||||
* @param {Function} handler The scroll event handler.
|
*
|
||||||
|
* ```ts
|
||||||
|
* @Page({
|
||||||
|
* template: `<ion-content id="my-content"></ion-content>`
|
||||||
|
* )}
|
||||||
|
* export class MyPage{
|
||||||
|
* constructor(app: IonicApp){
|
||||||
|
* this.app = app;
|
||||||
|
* }
|
||||||
|
* // Need to wait until the component has been initialized
|
||||||
|
* ngAfterViewInit() {
|
||||||
|
* // Here 'my-content' is the ID of my ion-content
|
||||||
|
* this.content = this.app.getComponent('my-content');
|
||||||
|
* this.content.addScrollEventListener(this.myScroll);
|
||||||
|
* }
|
||||||
|
* myScroll() {
|
||||||
|
* console.info('They see me scrolling...');
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
* @param {Function} handler The method you want perform when scrolling
|
||||||
* @returns {Function} A function that removes the scroll handler.
|
* @returns {Function} A function that removes the scroll handler.
|
||||||
*/
|
*/
|
||||||
addScrollEventListener(handler) {
|
addScrollEventListener(handler) {
|
||||||
@ -106,7 +126,27 @@ export class Content extends Ion {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds the specified touchmove handler to the content's scroll element.
|
* Adds the specified touchmove handler to the content's scroll element.
|
||||||
* @param {Function} handler The touchmove handler.
|
*
|
||||||
|
* ```ts
|
||||||
|
* @Page({
|
||||||
|
* template: `<ion-content id="my-content"></ion-content>`
|
||||||
|
* )}
|
||||||
|
* export class MyPage{
|
||||||
|
* constructor(app: IonicApp){
|
||||||
|
* this.app = app;
|
||||||
|
* }
|
||||||
|
* // Need to wait until the component has been initialized
|
||||||
|
* ngAfterViewInit() {
|
||||||
|
* // Here 'my-content' is the ID of my ion-content
|
||||||
|
* this.content = this.app.getComponent('my-content');
|
||||||
|
* this.content.addTouchMoveListener(this.touchHandler);
|
||||||
|
* }
|
||||||
|
* touchHandler() {
|
||||||
|
* console.log("I'm touching all the magazines!!");
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
* @param {Function} handler The method you want to perform when touchmove is firing
|
||||||
* @returns {Function} A function that removes the touchmove handler.
|
* @returns {Function} A function that removes the touchmove handler.
|
||||||
*/
|
*/
|
||||||
addTouchMoveListener(handler) {
|
addTouchMoveListener(handler) {
|
||||||
@ -124,11 +164,32 @@ export class Content extends Ion {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Scroll to the specified position.
|
* Scroll to the specified position.
|
||||||
* @param {TODO} x The x-value to scroll to.
|
*
|
||||||
* @param {TODO} y The y-value to scroll to.
|
* ```ts
|
||||||
* @param {Number} duration Duration of the scroll animation.
|
* @Page({
|
||||||
|
* template: `<ion-content id="my-content">
|
||||||
|
* <button (click)="scrollTo()"> Down 500px</button>
|
||||||
|
* </ion-content>`
|
||||||
|
* )}
|
||||||
|
* export class MyPage{
|
||||||
|
* constructor(app: IonicApp){
|
||||||
|
* this.app = app;
|
||||||
|
* }
|
||||||
|
* // Need to wait until the component has been initialized
|
||||||
|
* ngAfterViewInit() {
|
||||||
|
* // Here 'my-content' is the ID of my ion-content
|
||||||
|
* this.content = this.app.getComponent('my-content');
|
||||||
|
* }
|
||||||
|
* scrollTo() {
|
||||||
|
* this.content.scrollTo(0, 500, 200);
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
* @param {Number} x The x-value to scroll to.
|
||||||
|
* @param {Number} y The y-value to scroll to.
|
||||||
|
* @param {Number} duration Duration of the scroll animation in ms.
|
||||||
* @param {TODO} tolerance TODO
|
* @param {TODO} tolerance TODO
|
||||||
* @returns {TODO} TODO
|
* @returns {Promise} Returns a promise when done
|
||||||
*/
|
*/
|
||||||
scrollTo(x, y, duration, tolerance) {
|
scrollTo(x, y, duration, tolerance) {
|
||||||
if (this._scrollTo) {
|
if (this._scrollTo) {
|
||||||
@ -140,6 +201,31 @@ export class Content extends Ion {
|
|||||||
return this._scrollTo.start(x, y, duration, tolerance);
|
return this._scrollTo.start(x, y, duration, tolerance);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll to the specified position.
|
||||||
|
*
|
||||||
|
* ```ts
|
||||||
|
* @Page({
|
||||||
|
* template: `<ion-content id="my-content">
|
||||||
|
* <button (click)="scrollTop()"> Down 500px</button>
|
||||||
|
* </ion-content>`
|
||||||
|
* )}
|
||||||
|
* export class MyPage{
|
||||||
|
* constructor(app: IonicApp){
|
||||||
|
* this.app = app;
|
||||||
|
* }
|
||||||
|
* // Need to wait until the component has been initialized
|
||||||
|
* ngAfterViewInit() {
|
||||||
|
* // Here 'my-content' is the ID of my ion-content
|
||||||
|
* this.content = this.app.getComponent('my-content');
|
||||||
|
* }
|
||||||
|
* scrollTop() {
|
||||||
|
* this.content.scrollTop();
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
* @returns {Promise} Returns a promise when done
|
||||||
|
*/
|
||||||
scrollToTop() {
|
scrollToTop() {
|
||||||
if (this._scrollTo) {
|
if (this._scrollTo) {
|
||||||
this._scrollTo.dispose();
|
this._scrollTo.dispose();
|
||||||
|
@ -4,9 +4,10 @@ import {List} from '../list/list';
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* @name ItemSliding
|
||||||
|
*
|
||||||
* @description
|
* @description
|
||||||
* Creates a list-item that can easily be swiped,
|
* Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
|
||||||
* deleted, reordered, edited, and more.
|
|
||||||
*
|
*
|
||||||
* @usage
|
* @usage
|
||||||
* ```html
|
* ```html
|
||||||
|
@ -2,6 +2,8 @@ import {Component} from 'angular2/core';
|
|||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* @name Item
|
||||||
|
* @description
|
||||||
* Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
|
* Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
|
||||||
*
|
*
|
||||||
* There are three common ways to use an item:
|
* There are three common ways to use an item:
|
||||||
|
@ -21,6 +21,9 @@ import {ClickBlock} from '../util/click-block';
|
|||||||
import {ready, closest} from '../util/dom';
|
import {ready, closest} from '../util/dom';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
export function ionicProviders(args={}) {
|
export function ionicProviders(args={}) {
|
||||||
let platform = new Platform();
|
let platform = new Platform();
|
||||||
let navRegistry = new NavRegistry(args.pages);
|
let navRegistry = new NavRegistry(args.pages);
|
||||||
|
Reference in New Issue
Block a user