mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
docs(alert): do not allow mixing alert input types
This commit is contained in:
@ -15,29 +15,42 @@ import {ViewController} from '../nav/view-controller';
|
||||
* An Alert is a dialog that presents users with information or collects
|
||||
* information from the user using inputs. An alert appears on top
|
||||
* of the app's content, and must be manually dismissed by the user before
|
||||
* they can resume interaction with the app.
|
||||
*
|
||||
* An alert is created from an array of `buttons` and optionally an array of
|
||||
* `inputs`. Each button includes properties for its `text`, and optionally a
|
||||
* `handler`. If a handler returns `false` then the alert will not be dismissed.
|
||||
* An alert can also optionally have a `title`, `subTitle` and `message`.
|
||||
*
|
||||
* All buttons will show up in the order they have been added to the `buttons`
|
||||
* array, from left to right. Note: The right most button (the last one in the
|
||||
* array) is the main button.
|
||||
*
|
||||
* Optionally, a `role` property can be added to a button, such as `cancel`.
|
||||
* If a `cancel` role is on one of the buttons, then if the alert is dismissed
|
||||
* by tapping the backdrop, then it will fire the handler from the button
|
||||
* with a cancel role.
|
||||
*
|
||||
* Alerts can also include inputs whose data can be passed back to the app.
|
||||
* Inputs can be used to prompt users for information.
|
||||
* they can resume interaction with the app. It can also optionally have a
|
||||
* `title`, `subTitle` and `message`.
|
||||
*
|
||||
* You can pass all of the alert's options in the first argument of
|
||||
* the create method: `Alert.create(opts)`. Otherwise the alert's instance
|
||||
* has methods to add options, such as `setTitle()` or `addButton()`.
|
||||
*
|
||||
*
|
||||
* ### Alert Buttons
|
||||
*
|
||||
* In the array of `buttons`, each button includes properties for its `text`,
|
||||
* and optionally a `handler`. If a handler returns `false` then the alert
|
||||
* will not automatically be dismissed when the button is clicked. All
|
||||
* buttons will show up in the order they have been added to the `buttons`
|
||||
* array, from left to right. Note: The right most button (the last one in
|
||||
* the array) is the main button.
|
||||
*
|
||||
* Optionally, a `role` property can be added to a button, such as `cancel`.
|
||||
* If a `cancel` role is on one of the buttons, then if the alert is
|
||||
* dismissed by tapping the backdrop, then it will fire the handler from
|
||||
* the button with a cancel role.
|
||||
*
|
||||
*
|
||||
* ### Alert Inputs
|
||||
*
|
||||
* 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.
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
* constructor(nav: NavController) {
|
||||
@ -265,7 +278,14 @@ export class Alert extends ViewController {
|
||||
class AlertCmp {
|
||||
activeId: string;
|
||||
descId: string;
|
||||
d: any;
|
||||
d: {
|
||||
cssClass?: string;
|
||||
message?: string;
|
||||
subTitle?: string;
|
||||
buttons?: any[];
|
||||
inputs?: any[];
|
||||
enableBackdropDismiss?: boolean;
|
||||
};
|
||||
hdrId: string;
|
||||
id: number;
|
||||
subHdrId: string;
|
||||
@ -310,10 +330,10 @@ class AlertCmp {
|
||||
// normalize the data
|
||||
let data = this.d;
|
||||
|
||||
if (data.body) {
|
||||
if (data['body']) {
|
||||
// deprecated warning
|
||||
console.warn('Alert `body` property has been renamed to `message`');
|
||||
data.message = data.body;
|
||||
data.message = data['body'];
|
||||
}
|
||||
|
||||
data.buttons = data.buttons.map(button => {
|
||||
@ -335,7 +355,21 @@ class AlertCmp {
|
||||
};
|
||||
});
|
||||
|
||||
this.inputType = (data.inputs.length ? data.inputs[0].type : null);
|
||||
|
||||
// An alert can be created with several different inputs. Radios,
|
||||
// checkboxes and inputs are all accepted, but they cannot be mixed.
|
||||
let inputTypes = [];
|
||||
data.inputs.forEach(input => {
|
||||
if (inputTypes.indexOf(input.type) < 0) {
|
||||
inputTypes.push(input.type);
|
||||
}
|
||||
});
|
||||
|
||||
if (inputTypes.length > 1 && (inputTypes.indexOf('checkbox') > -1 || inputTypes.indexOf('radio') > -1)) {
|
||||
console.warn('Alert cannot mix input types: ' + (inputTypes.join('/')) + '. Please see alert docs for more info.');
|
||||
}
|
||||
|
||||
this.inputType = inputTypes.length ? inputTypes[0] : null;
|
||||
|
||||
let checkedInput = this.d.inputs.find(input => input.checked);
|
||||
if (checkedInput) {
|
||||
|
@ -99,6 +99,12 @@ class E2EPage {
|
||||
value: 'hello',
|
||||
placeholder: 'Placeholder 2'
|
||||
});
|
||||
alert.addInput({
|
||||
name: 'name3',
|
||||
value: 'http://ionicframework.com',
|
||||
type: 'url',
|
||||
placeholder: 'Favorite site ever'
|
||||
});
|
||||
alert.addButton({
|
||||
text: 'Cancel',
|
||||
handler: data => {
|
||||
|
Reference in New Issue
Block a user