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

docs(page): clean page docs up

Browse Source
This commit is contained in:
mhartington
2015-12-11 11:03:17 -05:00
parent 799f137eb5
commit 5bb9aeb5df
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ionic/config/decorators/page.ts
View File

@ -3,33 +3,37 @@ import {IONIC_DIRECTIVES} from '../directives';
/** /**
* _For more information on how pages are created, see the [NavController API * @name Page
* reference](../../components/nav/NavController/#creating_pages)._ * @description
*For more information on how pages are created, see the [NavController API reference](../../components/nav/NavController/#creating_pages)
* *
* The Page decorator indicates that the decorated class is an Ionic * The Page decorator indicates that the decorated class is an Ionic
* navigation component, meaning it can be navigated to using a NavController. * navigation component, meaning it can be navigated to using a NavController.
* *
* Pages have all [IONIC_DIRECTIVES](../IONIC_DIRECTIVES/), which include * Pages have all IONIC_DIRECTIVES, which include all Ionic components and directives,
* all Ionic components and directives, as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html) * as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html)
* and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html), * and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html),
* already provided to them, so you only need to supply custom components and * already provided to them, so you only need to supply custom components and directives to your pages:
* directives to your pages: *
* @usage
* *
* ```ts * ```ts
* @Page({ * @Page({
* template: ` * template: `
* <ion-checkbox my-custom-dir> * <ion-content>
* </ion-checkbox>` * I am a page!
* directives: [MyCustomDirective] * </ion-content>
* `
* }) * })
* class MyPage {} * class MyPage {}
* ``` * ```
* Here [Checkbox](../../../components/checkbox/Checkbox/) will load because
* it is in IONIC_DIRECTIVES, so there is no need to add it to the `directives`
* array.
* *
* For custom components that use Ionic components, you will need to include * Here [Content](../../../components/content/Content/) will load because
* IONIC_DIRECTIVES in the `directives` array: * it is in `IONIC_DIRECTIVES`, so there is no need to add a `directives` array.
*
*
* Say you built a custom component that uses the an already exsiting Ionic component.
* In this case, you would add `IONIC_DIRECTIVES` to your directives array.
* *
* ```ts * ```ts
* import {IONIC_DIRECTIVES} from 'ionic/ionic'; * import {IONIC_DIRECTIVES} from 'ionic/ionic';
@ -42,17 +46,22 @@ import {IONIC_DIRECTIVES} from '../directives';
* }) * })
* class MyCustomCheckbox {} * class MyCustomCheckbox {}
*``` *```
* Alternatively, you could: * Alternatively, you could:
*
* ```ts * ```ts
* import {Checkbox, Icon} from 'ionic/ionic' * import {Checkbox, Icon} from 'ionic/ionic'
* ``` * ```
*
* along with any other components and add them individually: * along with any other components and add them individually:
*
* ``` * ```
* @Component({ * @Component({
* ... * ...
* directives: [Checkbox, Icon] * directives: [Checkbox, Icon]
* }) * })
* ``` * ```
*
* However, using IONIC_DIRECTIVES will always *Just Work* with no * However, using IONIC_DIRECTIVES will always *Just Work* with no
* performance overhead, so there is really no reason to not always use it. * performance overhead, so there is really no reason to not always use it.
* *