mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
docs(navCtrl): NavController#present docs
This commit is contained in:
@ -18,6 +18,40 @@ import {Animation} from '../../animations/animation';
|
|||||||
*
|
*
|
||||||
* @usage
|
* @usage
|
||||||
* ```ts
|
* ```ts
|
||||||
|
*
|
||||||
|
* constructor(nav: NavController) {
|
||||||
|
* this.nav = nav;
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* presentActionSheet() {
|
||||||
|
* let actionSheet = ActionSheet.create({
|
||||||
|
* title: 'Modify your album',
|
||||||
|
* buttons: [
|
||||||
|
* {
|
||||||
|
* text: 'Destructive',
|
||||||
|
* style: 'destructive',
|
||||||
|
* handler: () => {
|
||||||
|
* console.log('Destructive clicked');
|
||||||
|
* }
|
||||||
|
* },
|
||||||
|
* {
|
||||||
|
* text: 'Archive',
|
||||||
|
* handler: () => {
|
||||||
|
* console.log('Archive clicked');
|
||||||
|
* }
|
||||||
|
* },
|
||||||
|
* {
|
||||||
|
* text: 'Cancel',
|
||||||
|
* style: 'cancel',
|
||||||
|
* handler: () => {
|
||||||
|
* console.log('Cancel clicked');
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ]
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* this.nav.present(actionSheet);
|
||||||
|
* }
|
||||||
* ```
|
* ```
|
||||||
*
|
*
|
||||||
* @demo /docs/v2/demos/action-sheet/
|
* @demo /docs/v2/demos/action-sheet/
|
||||||
@ -32,30 +66,47 @@ import {Animation} from '../../animations/animation';
|
|||||||
this.viewType = 'action-sheet';
|
this.viewType = 'action-sheet';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
getTransitionName(direction) {
|
getTransitionName(direction) {
|
||||||
let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter');
|
let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter');
|
||||||
return this._nav && this._nav.config.get(key);
|
return this._nav && this._nav.config.get(key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} title Action sheet title
|
||||||
|
*/
|
||||||
setTitle(title) {
|
setTitle(title) {
|
||||||
this.data.title = title;
|
this.data.title = title;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} subTitle Action sheet subtitle
|
||||||
|
*/
|
||||||
setSubTitle(subTitle) {
|
setSubTitle(subTitle) {
|
||||||
this.data.subTitle = subTitle;
|
this.data.subTitle = subTitle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} button Action sheet button
|
||||||
|
*/
|
||||||
addButton(button) {
|
addButton(button) {
|
||||||
this.data.buttons.push(button);
|
this.data.buttons.push(button);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} button Action sheet options
|
||||||
|
*/
|
||||||
static create(data={}) {
|
static create(data={}) {
|
||||||
return new ActionSheet(data);
|
return new ActionSheet(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ion-action-sheet',
|
selector: 'ion-action-sheet',
|
||||||
template:
|
template:
|
||||||
|
@ -10,7 +10,7 @@ class E2EPage {
|
|||||||
this.nav = nav;
|
this.nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
openActionSheet1(ev) {
|
presentActionSheet1() {
|
||||||
this.result = '';
|
this.result = '';
|
||||||
|
|
||||||
let actionSheet = ActionSheet.create({
|
let actionSheet = ActionSheet.create({
|
||||||
@ -44,7 +44,7 @@ class E2EPage {
|
|||||||
text: 'Cancel',
|
text: 'Cancel',
|
||||||
style: 'cancel', // will always sort to be on the bottom
|
style: 'cancel', // will always sort to be on the bottom
|
||||||
handler: () => {
|
handler: () => {
|
||||||
console.log('cancel this clicked');
|
console.log('Cancel clicked');
|
||||||
this.result = 'Canceled';
|
this.result = 'Canceled';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -54,7 +54,7 @@ class E2EPage {
|
|||||||
this.nav.present(actionSheet);
|
this.nav.present(actionSheet);
|
||||||
}
|
}
|
||||||
|
|
||||||
openActionSheet2(ev) {
|
presentActionSheet2(ev) {
|
||||||
this.result = '';
|
this.result = '';
|
||||||
|
|
||||||
let actionSheet = ActionSheet.create({
|
let actionSheet = ActionSheet.create({
|
||||||
|
@ -4,8 +4,8 @@
|
|||||||
</ion-navbar>
|
</ion-navbar>
|
||||||
|
|
||||||
<ion-content padding>
|
<ion-content padding>
|
||||||
<button class="e2eOpenActionSheet" (click)="openActionSheet1()">Open Action Sheet 1</button>
|
<button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
|
||||||
<button (click)="openActionSheet2()">Open Action Sheet 2</button>
|
<button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
Result: {{result}}
|
Result: {{result}}
|
||||||
|
@ -206,7 +206,7 @@ export class NavController extends Ion {
|
|||||||
*
|
*
|
||||||
* ```typescript
|
* ```typescript
|
||||||
* class MyClass{
|
* class MyClass{
|
||||||
* constructor(nav:NavController){
|
* constructor(nav: NavController){
|
||||||
* this.nav = nav;
|
* this.nav = nav;
|
||||||
* }
|
* }
|
||||||
*
|
*
|
||||||
@ -225,10 +225,10 @@ export class NavController extends Ion {
|
|||||||
* }
|
* }
|
||||||
* }
|
* }
|
||||||
* ```
|
* ```
|
||||||
* @param {Any} component The name of the component you want to push on the navigation stack
|
* @param {Any} component 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={}] Any options you want to use pass to transtion
|
* @param {Object} [opts={}] Any options you want to use pass to transtion
|
||||||
* @returns {Promise} Returns a promise when the transition is completed
|
* @returns {Promise} Returns a promise, which resolves when the transition has completed
|
||||||
*/
|
*/
|
||||||
push(componentType, params={}, opts={}, callback) {
|
push(componentType, params={}, opts={}, callback) {
|
||||||
if (!componentType) {
|
if (!componentType) {
|
||||||
@ -290,6 +290,31 @@ export class NavController extends Ion {
|
|||||||
return promise;
|
return promise;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Present is how we display overlays on top of the content, from within the
|
||||||
|
* root level `NavController`. The `present` method is used by overlays, such
|
||||||
|
* as `ActionSheet`, `Alert`, and `Modal`. The main difference between `push`
|
||||||
|
* and `present`, is that `present` takes a `ViewController` instance, whereas
|
||||||
|
* `push` takes a `Page` component class. Additionally, `present` will place
|
||||||
|
* the overlay in the root NavController's stack.
|
||||||
|
*
|
||||||
|
* ```typescript
|
||||||
|
* class MyClass{
|
||||||
|
* constructor(nav: NavController) {
|
||||||
|
* this.nav = nav;
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* presentModal() {
|
||||||
|
* let modal = Modal.create(ProfilePage);
|
||||||
|
* this.nav.present(modal);
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* @param {ViewController} enteringView The name of the component you want to push on the navigation stack
|
||||||
|
* @param {Object} [opts={}] Any options you want to use pass to transtion
|
||||||
|
* @returns {Promise} Returns a promise, which resolves when the transition has completed
|
||||||
|
*/
|
||||||
present(enteringView, opts={}) {
|
present(enteringView, opts={}) {
|
||||||
let rootNav = this.rootNav;
|
let rootNav = this.rootNav;
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user