From 093feac6e4b66cf4ebc9630345ae19e7a9da2c7a Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 28 Mar 2018 14:27:34 -0400 Subject: [PATCH] docs(alert): add javascript and angular example docs --- core/src/components/alert/readme.md | 15 -- core/src/components/alert/usage/angular.md | 240 ++++++++++++++++++ core/src/components/alert/usage/javascript.md | 238 +++++++++++++++++ 3 files changed, 478 insertions(+), 15 deletions(-) create mode 100644 core/src/components/alert/usage/angular.md create mode 100644 core/src/components/alert/usage/javascript.md diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 1383d4221c..69e472ce8a 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -20,21 +20,6 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a ` Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text"" inputs can be mixed, such as `url`, `email`, `text`, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. -```javascript -async function presentAlert() { - const alertController = document.querySelector('ion-alert-controller'); - await alertController.componentOnReady(); - - const alert = await alertController.create({ - title: 'Alert', - subTitle: 'Subtitle', - message: 'This is an alert message.', - buttons: ['OK'] - }); - return await alert.present(); -} -``` - diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md new file mode 100644 index 0000000000..151087f466 --- /dev/null +++ b/core/src/components/alert/usage/angular.md @@ -0,0 +1,240 @@ +```javascript +import { Component } from '@angular/core'; +import { AlertController } from '@ionic/angular'; + +@Component({ + selector: 'alert-example', + templateUrl: 'alert-example.html', + styleUrls: ['./alert-example.css'], +}) +export class AlertExample { + + constructor(public alertController: AlertController) {} + + presentAlert() { + const alert = this.alertController.create({ + title: 'Alert', + subTitle: 'Subtitle', + message: 'This is an alert message.', + buttons: ['OK'] + }); + + alert.present(); + } + + presentAlertMultipleButtons() { + const alert = this.alertController.create({ + title: 'Alert', + subTitle: 'Subtitle', + message: 'This is an alert message.', + buttons: ['Cancel', 'Open Modal', 'Delete'] + }); + + alert.present(); + } + + presentAlertConfirm() { + const alert = this.alertController.create({ + title: 'Confirm!', + message: 'Message text!!!', + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: (blah) => { + console.log('Confirm Cancel: blah'); + } + }, { + text: 'Okay', + handler: () => { + console.log('Confirm Okay') + } + } + ] + }); + + alert.present(); + } + + presentAlertPrompt() { + const alert = this.alertController.create({ + title: 'Prompt!', + inputs: [ + { + placeholder: 'Placeholder 1' + }, + { + name: 'name2', + id: 'name2-id', + value: 'hello', + placeholder: 'Placeholder 2' + }, + { + name: 'name3', + value: 'http://ionicframework.com', + type: 'url', + placeholder: 'Favorite site ever' + }, + // input date with min & max + { + name: 'name4', + type: 'date', + min: '2017-03-01', + max: '2018-01-12' + }, + // input date without min nor max + { + name: 'name5', + type: 'date' + }, + { + name: 'name6', + type: 'number', + min: -5, + max: 10 + }, + { + name: 'name7', + type: 'number' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + + alert.present(); + } + + presentAlertRadio() { + const alert = this.alertController.create({ + title: 'Radio', + inputs: [ + { + type: 'radio', + label: 'Radio 1', + value: 'value1', + checked: true + }, + { + type: 'radio', + label: 'Radio 2', + value: 'value2' + }, + { + type: 'radio', + label: 'Radio 3', + value: 'value3' + }, + { + type: 'radio', + label: 'Radio 4', + value: 'value4' + }, + { + type: 'radio', + label: 'Radio 5', + value: 'value5' + }, + { + type: 'radio', + label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', + value: 'value6' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + + alert.present(); + } + + presentAlertCheckbox() { + const alert = this.alertController.create({ + title: 'Checkbox', + inputs: [ + { + type: 'checkbox', + label: 'Checkbox 1', + value: 'value1', + checked: true + }, + + { + type: 'checkbox', + label: 'Checkbox 2', + value: 'value2' + }, + + { + type: 'checkbox', + label: 'Checkbox 3', + value: 'value3' + }, + + { + type: 'checkbox', + label: 'Checkbox 4', + value: 'value4' + }, + + { + type: 'checkbox', + label: 'Checkbox 5', + value: 'value5' + }, + + { + type: 'checkbox', + label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', + value: 'value6' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + + alert.present(); + } + +} +``` diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md new file mode 100644 index 0000000000..c3b44a5fd1 --- /dev/null +++ b/core/src/components/alert/usage/javascript.md @@ -0,0 +1,238 @@ +```javascript +async function presentAlert() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Alert', + subTitle: 'Subtitle', + message: 'This is an alert message.', + buttons: ['OK'] + }); + return await alert.present(); +} + +async function presentAlertMultipleButtons() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Alert', + subTitle: 'Subtitle', + message: 'This is an alert message.', + buttons: ['Cancel', 'Open Modal', 'Delete'] + }); + return await alert.present(); +} + +async function presentAlertConfirm() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Confirm!', + message: 'Message text!!!', + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: (blah) => { + console.log('Confirm Cancel: blah'); + } + }, { + text: 'Okay', + handler: () => { + console.log('Confirm Okay') + } + } + ] + }); + return await alert.present(); +} + +async function presentAlertPrompt() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Prompt!', + inputs: [ + { + placeholder: 'Placeholder 1' + }, + { + name: 'name2', + id: 'name2-id', + value: 'hello', + placeholder: 'Placeholder 2' + }, + { + name: 'name3', + value: 'http://ionicframework.com', + type: 'url', + placeholder: 'Favorite site ever' + }, + // input date with min & max + { + name: 'name4', + type: 'date', + min: '2017-03-01', + max: '2018-01-12' + }, + // input date without min nor max + { + name: 'name5', + type: 'date' + }, + { + name: 'name6', + type: 'number', + min: -5, + max: 10 + }, + { + name: 'name7', + type: 'number' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + return await alert.present(); +} + +async function presentAlertRadio() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Radio', + inputs: [ + { + type: 'radio', + label: 'Radio 1', + value: 'value1', + checked: true + }, + { + type: 'radio', + label: 'Radio 2', + value: 'value2' + }, + { + type: 'radio', + label: 'Radio 3', + value: 'value3' + }, + { + type: 'radio', + label: 'Radio 4', + value: 'value4' + }, + { + type: 'radio', + label: 'Radio 5', + value: 'value5' + }, + { + type: 'radio', + label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', + value: 'value6' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + return await alert.present(); +} + +async function presentAlertCheckbox() { + const alertController = document.querySelector('ion-alert-controller'); + await alertController.componentOnReady(); + + const alert = await alertController.create({ + title: 'Checkbox', + inputs: [ + { + type: 'checkbox', + label: 'Checkbox 1', + value: 'value1', + checked: true + }, + + { + type: 'checkbox', + label: 'Checkbox 2', + value: 'value2' + }, + + { + type: 'checkbox', + label: 'Checkbox 3', + value: 'value3' + }, + + { + type: 'checkbox', + label: 'Checkbox 4', + value: 'value4' + }, + + { + type: 'checkbox', + label: 'Checkbox 5', + value: 'value5' + }, + + { + type: 'checkbox', + label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', + value: 'value6' + } + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + cssClass: 'secondary', + handler: () => { + console.log('Confirm Cancel') + } + }, { + text: 'Ok', + handler: () => { + console.log('Confirm Ok') + } + } + ] + }); + return await alert.present(); +} +```