diff --git a/src/components/alert/alert-component.ts b/src/components/alert/alert-component.ts index 29f3ced9f3..9199169853 100644 --- a/src/components/alert/alert-component.ts +++ b/src/components/alert/alert-component.ts @@ -78,6 +78,7 @@ export class AlertCmp { message?: string; title?: string; subTitle?: string; + mode?: string; buttons?: any[]; inputs?: any[]; enableBackdropDismiss?: boolean; @@ -104,7 +105,7 @@ export class AlertCmp { // gesture blocker is used to disable gestures dynamically this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL); this.d = params.data; - this.mode = config.get('mode'); + this.mode = this.d.mode || config.get('mode'); _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true); if (this.d.cssClass) { diff --git a/src/components/alert/alert-options.ts b/src/components/alert/alert-options.ts index 5124c9c5a6..5000a7edd6 100644 --- a/src/components/alert/alert-options.ts +++ b/src/components/alert/alert-options.ts @@ -4,6 +4,7 @@ export interface AlertOptions { subTitle?: string; message?: string; cssClass?: string; + mode?: string; inputs?: Array; buttons?: Array; enableBackdropDismiss?: boolean; diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 34323d4b06..7fa69656a3 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -74,6 +74,13 @@ export class Alert extends ViewController { this.data.cssClass = cssClass; } + /** + * @param {string} mode Set the mode of the alert (ios, md, wp). + */ + setMode(mode: string) { + this.data.mode = mode; + } + /** * Present the alert instance. * @@ -220,6 +227,7 @@ export class Alert extends ViewController { * | subTitle | `string` | The subtitle for the alert. | * | message | `string` | The message for the alert. | * | cssClass | `string` | Additional classes for custom styles, separated by spaces. | + * | mode | `string` | Set alert mode (ios, md, wp). | * | inputs | `array` | An array of inputs for the alert. See input options. | * | buttons | `array` | An array of buttons for the alert. See buttons options. | * | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. | diff --git a/src/components/alert/test/basic/app.module.ts b/src/components/alert/test/basic/app.module.ts index cb932fb685..fd0a8d8cf7 100644 --- a/src/components/alert/test/basic/app.module.ts +++ b/src/components/alert/test/basic/app.module.ts @@ -283,6 +283,16 @@ export class E2EPage { alert.present(); } + doAlertWithMode(alertMode: string) { + let alert = this.alertCtrl.create({ + title: 'Alert!', + mode: alertMode, + buttons: ['OK'] + }); + + alert.present(); + } + ionViewDidLeave() { console.log('E2EPage, ionViewDidLeave'); } diff --git a/src/components/alert/test/basic/e2e.ts b/src/components/alert/test/basic/e2e.ts index b102a9e214..dfa5a89526 100644 --- a/src/components/alert/test/basic/e2e.ts +++ b/src/components/alert/test/basic/e2e.ts @@ -74,3 +74,11 @@ it('should open disabled backdrop alert', function() { it('should close with button click', function() { element(by.css('.alert-button:last-child')).click(); }); + +it('should open alert with mode', function() { + element(by.css('.e2eAlertMode')).click(); +}); + +it('should close with button click', function() { + element(by.css('.alert-button:last-child')).click(); +}); diff --git a/src/components/alert/test/basic/main.html b/src/components/alert/test/basic/main.html index 0400538042..a1b00909e1 100644 --- a/src/components/alert/test/basic/main.html +++ b/src/components/alert/test/basic/main.html @@ -19,6 +19,9 @@ + + +
     Confirm Opened: {{testConfirmOpen}}