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

docs(alertController, navController): update docs

Browse Source
This commit is contained in:
mhartington
2016-06-30 13:46:00 -04:00
parent 686c262c4c
commit df07682407
2 changed files with 111 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/action-sheet/action-sheet.ts
View File

@ -108,41 +108,67 @@ export class ActionSheet extends ViewController {
* *
* @usage * @usage
* ```ts * ```ts
* constructor(private actionSheetCtrl: ActionSheetController) { * import {ActionSheetController} from 'ionic-angular'
* *
* } * export class MyClass{
* *
* presentActionSheet() { * constructor(private actionSheetCtrl: ActionSheetController) {}
* let actionSheet = this.actionSheetCtrl.create({
* title: 'Modify your album',
* buttons: [
* {
* text: 'Destructive',
* role: 'destructive',
* handler: () => {
* console.log('Destructive clicked');
* }
* },
* {
* text: 'Archive',
* handler: () => {
* console.log('Archive clicked');
* }
* },
* {
* text: 'Cancel',
* role: 'cancel',
* handler: () => {
* console.log('Cancel clicked');
* }
* }
* ]
* });
* *
* actionSheet.present(); * presentActionSheet() {
* let actionSheet = this.actionSheetCtrl.create({
* title: 'Modify your album',
* buttons: [
* {
* text: 'Destructive',
* role: 'destructive',
* handler: () => {
* console.log('Destructive clicked');
* }
* },
* {
* text: 'Archive',
* handler: () => {
* console.log('Archive clicked');
* }
* },
* {
* text: 'Cancel',
* role: 'cancel',
* handler: () => {
* console.log('Cancel clicked');
* }
* }
* ]
* });
*
* actionSheet.present();
* }
* } * }
* ``` * ```
* *
* @advanced
*
* ActionSheet create options
*
* | Option | Type | Description |
* |-----------------------|------------|-----------------------------------------------------------------|
* | title |`string` | The title for the actionsheet |
* | subTitle |`string` | The sub-title for the actionsheet |
* | cssClass |`string` | An additional class for custom styles |
* | enableBackdropDismiss |`boolean` | If the actionsheet should close when the user taps the backdrop |
* | buttons |`array<any>`| An array of buttons to display |
*
* ActionSheet button options
*
* | Option | Type | Description |
* |----------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------|
* | text | `string` | The buttons text |
* | icon | `icon` | The buttons icons |
* | handler | `any` | An express the button should evaluate |
* | cssClass | `string` | An additional class for custom styles |
* | role | `string` | How the button should be displayed, `destructive` or `cancel`. If not role is provided, it will display the button without any additional styles |
*
*
* *
* ### Dismissing And Async Navigation * ### Dismissing And Async Navigation
* *
@ -208,28 +234,7 @@ export class ActionSheetController {
constructor(private _app: App) {} constructor(private _app: App) {}
/** /**
* Open an action sheet with the following options * Open an action sheet with a title, subTitle, and an array of buttons
*
* | Option | Type | Description |
* |-----------------------|------------|-----------------------------------------------------------------|
* | title |`string` | The title for the actionsheet |
* | subTitle |`string` | The sub-title for the actionsheet |
* | cssClass |`string` | An additional class for custom styles |
* | enableBackdropDismiss |`boolean` | If the actionsheet should close when the user taps the backdrop |
* | buttons |`array<any>`| An array of buttons to display |
*
* For the buttons:
*
* | Option | Type | Description |
* |----------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------|
* | text | `string` | The buttons text |
* | icon | `icon` | The buttons icons |
* | handler | `any` | An express the button should evaluate |
* | cssClass | `string` | An additional class for custom styles |
* | role | `string` | How the button should be displayed, `destructive` or `cancel`. If not role is provided, it will display the button without any additional styles |
*
*
*
* @param {ActionSheetOptions} opts Action sheet options * @param {ActionSheetOptions} opts Action sheet options
*/ */
create(opts: ActionSheetOptions = {}): ActionSheet { create(opts: ActionSheetOptions = {}): ActionSheet {

253
src/components/nav/nav-controller.ts
View File

@ -92,14 +92,14 @@ import { ViewController } from './view-controller';
* } * }
* ``` * ```
* *
* | Page Event | Description | * | Page Event | Description |
* |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| * |---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
* | `ionViewLoaded` | Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `ionViewLoaded` event is good place to put your setup code for the page. | * | `ionViewLoaded` | Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `ionViewLoaded` event is good place to put your setup code for the page. |
* | `ionViewWillEnter` | Runs when the page is about to enter and become the active page. | * | `ionViewWillEnter` | Runs when the page is about to enter and become the active page. |
* | `ionViewDidEnter` | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. | * | `ionViewDidEnter` | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. |
* | `ionViewWillLeave` | Runs when the page is about to leave and no longer be the active page. | * | `ionViewWillLeave` | Runs when the page is about to leave and no longer be the active page. |
* | `ionViewDidLeave` | Runs when the page has finished leaving and is no longer the active page. | * | `ionViewDidLeave` | Runs when the page has finished leaving and is no longer the active page. |
* | `ionViewWillUnload` | Runs when the page is about to be destroyed and have its elements removed. | * | `ionViewWillUnload` | Runs when the page is about to be destroyed and have its elements removed. |
* | `ionViewDidUnload` | Runs after the page has been destroyed and its elements have been removed. * | `ionViewDidUnload` | Runs after the page has been destroyed and its elements have been removed.
* *
* *
@ -171,12 +171,46 @@ export class NavController extends Ion {
protected _trnsDelay: any; protected _trnsDelay: any;
protected _views: ViewController[] = []; protected _views: ViewController[] = [];
/**
* Observable to be subscribed to when a component is loaded.
* @returns {Observable} Returns an observable
*/
viewDidLoad: EventEmitter<any>; viewDidLoad: EventEmitter<any>;
/**
* Observable to be subscribed to when a component is about to be loaded.
* @returns {Observable} Returns an observable
*/
viewWillEnter: EventEmitter<any>; viewWillEnter: EventEmitter<any>;
/**
* Observable to be subscribed to when a component has fully become the active component.
* @returns {Observable} Returns an observable
*/
viewDidEnter: EventEmitter<any>; viewDidEnter: EventEmitter<any>;
/**
* Observable to be subscribed to when a component is about to leave, and no longer active.
* @returns {Observable} Returns an observable
*/
viewWillLeave: EventEmitter<any>; viewWillLeave: EventEmitter<any>;
/**
* Observable to be subscribed to when a component has fully left and is no longer active.
* @returns {Observable} Returns an observable
*/
viewDidLeave: EventEmitter<any>; viewDidLeave: EventEmitter<any>;
/**
* Observable to be subscribed to when a component is about to be unloaded and destroyed.
* @returns {Observable} Returns an observable
*/
viewWillUnload: EventEmitter<any>; viewWillUnload: EventEmitter<any>;
/**
* Observable to be subscribed to when a component has fully been unloaded and destroyed.
* @returns {Observable} Returns an observable
*/
viewDidUnload: EventEmitter<any>; viewDidUnload: EventEmitter<any>;
/** /**
@ -260,77 +294,10 @@ export class NavController extends Ion {
} }
/** /**
* You can set the views of the current navigation stack and navigate to the * Set the views of the current navigation stack and navigate to the
* last view. * last view. By default animations are disabled, but they can be enabled
* * by passing options to the navigation controller.You can also pass any
* * navigation params to the individual pages in the array.
*```ts
* import {NavController } from 'ionic-angular'
* import {Detail } from '../detail/detail'
* import {Info } from '../info/info'
*
* export class Home {
* constructor(private nav: NavController) {
*
* }
* setPages() {
* this.nav.setPages([ {page: List}, {page: Detail}, {page:Info} ]);
* }
* }
*```
*
*
* In this example, we're giving the current nav stack an array of pages.
* Then the navigation stack will navigate to the last page in the array
* and remove the previously active page.
*
* By default animations are disabled, but they can be enabled by passing
* options to the navigation controller.
*
*
* ```ts
* import {NavController } from 'ionic-angular'
* import {Detail } from '../detail/detail'
*
* export class Home {
* constructor(private nav: NavController) {
*
* }
* setPages() {
* this.nav.setPages([ {page: List}, {page: Detail} ], {
* animate: true
* });
* }
* }
* ```
*
* You can also pass any navigation params to the individual pages in
* the array.
*
*
* ```ts
* import {NavController } from 'ionic-angular';
* import {Info } from '../info/info';
* import {List } from '../list/list';
* import {Detail } from '../detail/detail';
*
* export class Home {
* constructor(private nav: NavController) {
*
* }
* setPages() {
* this.nav.setPages([{
* page: Info
* }, {
* page: List,
* params: {tags: 'css'}
* }, {
* page: Detail,
* params: {id: 325}
* }]);
* }
* }
*```
* *
* @param {array<Page>} pages An arry of page components and their params to load in the stack. * @param {array<Page>} pages An arry of page components and their params to load in the stack.
* @param {object} [opts={}] Nav options to go with this transition. * @param {object} [opts={}] Nav options to go with this transition.
@ -373,66 +340,9 @@ export class NavController extends Ion {
} }
/** /**
* Push is how we can pass components and navigate to them. We push the component * Push a new component onto the current navication stack. Pass any aditional information
* we want to navigate to on to the navigation stack. * along as an object. This additional information is acessible through NavParams
* *
* ```ts
* class MyClass{
* constructor(nav:NavController){
* this.nav = nav;
* }
*
* pushPage(){
* this.nav.push(SecondView);
* }
* }
* ```
*
* We can also pass along parameters to the next view, such as data that we have
* on the current view. This is a similar concept to to V1 apps with `$stateParams`.
*
* ```ts
* class MyClass{
* constructor(nav:NavController){
* this.nav = nav;
* }
*
* pushPage(user){
* // user is an object we have in our view
* // typically this comes from an ngFor or some array
* // here we can create an object with a property of
* // paramUser, and set its value to the user object we passed in
* this.nav.push(SecondView, { paramUser: user });
* }
* }
* ```
*
* We'll look at how we can access that data in the `SecondView` in the
* navParam docs.
*
* We can also pass any options to the transtion from that same method.
*
* ```ts
* class MyClass{
* constructor(private nav: NavController){
*
* }
*
* pushPage(user){
* this.nav.push(SecondView,{
* // user is an object we have in our view
* // typically this comes from an ngFor or some array
* // here we can create an object with a property of
* // paramUser, and set it's value to the user object we passed in
* paramUser: user
* },{
* // here we can configure things like the animations direction or
* // or if the view should animate at all.
* direction: 'back'
* });
* }
* }
* ```
* @param {Page} page The page component class you want to push on to the navigation stack * @param {Page} page The page component class you want to push on to the navigation stack
* @param {object} [params={}] Any nav-params you want to pass along to the next view * @param {object} [params={}] Any nav-params you want to pass along to the next view
* @param {object} [opts={}] Nav options to go with this transition. * @param {object} [opts={}] Nav options to go with this transition.
@ -454,21 +364,9 @@ export class NavController extends Ion {
} }
/** /**
* Inserts a view into the nav stack at the specified index. This is useful if * Inserts a component into the nav stack at the specified index. This is useful if
* you need to add a view at any point in your navigation stack. * you need to add a component at any point in your navigation stack.
* *
* ```ts
* export class Detail {
* constructor(private nav: NavController) {
*
* }
* insertPage(){
* this.nav.insert(1, Info);
* }
* }
* ```
*
* This will insert the `Info` page into the second slot of our navigation stack.
* *
* @param {number} insertIndex The index where to insert the page. * @param {number} insertIndex The index where to insert the page.
* @param {Page} page The component you want to insert into the nav stack. * @param {Page} page The component you want to insert into the nav stack.
@ -481,27 +379,8 @@ export class NavController extends Ion {
} }
/** /**
* Inserts multiple pages into the nav stack at the specified index. * Inserts an array of components into the nav stack at the specified index.
* * The last component in the array will animate in and become the active component
* ```ts
* export class Detail {
* constructor(private nav: NavController) {
*
* }
* insertPages(){
* let pages = [
* { page: Info },
* { page: ProfileList },
* { page: ProfileDetail, params: {userId:5} }
* ];
* this.nav.insertPages(2, pages);
* }
* }
* ```
*
* This will insert each of the pages in the array, starting at the third slot
* (second index) of the nav stack. The last page in the array will animate
* in and become the active page.
* *
* @param {number} insertIndex The index where you want to insert the page. * @param {number} insertIndex The index where you want to insert the page.
* @param {array<{page: Page, params=: any}>} insertPages An array of objects, each with a `page` and optionally `params` property. * @param {array<{page: Page, params=: any}>} insertPages An array of objects, each with a `page` and optionally `params` property.
@ -628,21 +507,9 @@ export class NavController extends Ion {
} }
/** /**
* If you wanted to navigate back from a current view, you can use the * Call to navigate back from a current component. Similar to `push()`, you
* back-button or programatically call `pop()`. Similar to `push()`, you
* can also pass navigation options. * can also pass navigation options.
* *
* ```ts
* class SecondView{
* constructor(nav:NavController){
* this.nav = nav;
* }
* goBack(){
* this.nav.pop();
* }
* }
* ```
*
* @param {object} [opts={}] Nav options to go with this transition. * @param {object} [opts={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed. * @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/ */
@ -666,8 +533,8 @@ export class NavController extends Ion {
} }
/** /**
* Similar to `pop()`, this method let's you navigate back to the root of * Navigate back to the root of the stack, no matter how far back that is.
* the stack, no matter how many pages back that is. *
* @param {object} [opts={}] Nav options to go with this transition. * @param {object} [opts={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed. * @returns {Promise} Returns a promise which is resolved when the transition has completed.
*/ */
@ -677,6 +544,7 @@ export class NavController extends Ion {
/** /**
* Pop to a specific view in the history stack. * Pop to a specific view in the history stack.
*
* @param {ViewController} view to pop to * @param {ViewController} view to pop to
* @param {object} [opts={}] Nav options to go with this transition. * @param {object} [opts={}] Nav options to go with this transition.
* @returns {Promise} Returns a promise which is resolved when the transition has completed. * @returns {Promise} Returns a promise which is resolved when the transition has completed.
@ -698,17 +566,6 @@ export class NavController extends Ion {
/** /**
* Removes a page from the nav stack at the specified index. * Removes a page from the nav stack at the specified index.
* *
* ```ts
* export class Detail {
* constructor(private nav: NavController) {
*
* }
* removePage(){
* this.nav.remove(1);
* }
* }
* ```
*
* @param {number} [startIndex] The starting index to remove pages from the stack. Default is the index of the last page. * @param {number} [startIndex] The starting index to remove pages from the stack. Default is the index of the last page.
* @param {number} [removeCount] The number of pages to remove, defaults to remove `1`. * @param {number} [removeCount] The number of pages to remove, defaults to remove `1`.
* @param {object} [opts={}] Any options you want to use pass to transtion. * @param {object} [opts={}] Any options you want to use pass to transtion.