docs() id, content, bootstrap, item, item-sliding

This commit is contained in:
mhartington
2015-12-15 16:57:43 -05:00
parent d5e0570193
commit f97e9eaa19
5 changed files with 111 additions and 11 deletions

View File

@ -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');
* }
* } * }
* ``` * ```
* *

View File

@ -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();

View File

@ -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

View File

@ -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:

View File

@ -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);