diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 4b109ea99f1..cee68260208 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -20,7 +20,7 @@ export interface AlertOptions {
}
export interface AlertInput {
- type?: TextFieldTypes | 'checkbox' | 'radio';
+ type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
name?: string;
placeholder?: string;
value?: any;
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index e62adb38906..99f254e35d2 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -197,3 +197,8 @@
.alert-checkbox-inner {
box-sizing: border-box;
}
+
+textarea.alert-input {
+ min-height: $alert-input-min-height;
+ resize: none;
+}
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index da9058d323c..e2e9f4b1a3c 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -373,25 +373,46 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
return (
);
}
diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss
index b043e5c7cd6..eed27be33ba 100644
--- a/core/src/components/alert/alert.vars.scss
+++ b/core/src/components/alert/alert.vars.scss
@@ -14,3 +14,6 @@ $alert-button-line-height: 20px !default;
/// @prop - Font size of the alert button
$alert-button-font-size: 14px !default;
+
+/// @prop - Minimum height of a textarea in the alert
+$alert-input-min-height: 37px !default;
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index d83064833b2..cf8c44e457f 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -17,7 +17,7 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a `
### 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.
+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`, `textarea` 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.
@@ -102,6 +102,13 @@ export class AlertExample {
value: 'hello',
placeholder: 'Placeholder 2'
},
+ // multiline input.
+ {
+ name: 'paragraph',
+ id: 'paragraph',
+ type: 'textarea',
+ placeholder: 'Placeholder 3'
+ },
{
name: 'name3',
value: 'http://ionicframework.com',
@@ -346,6 +353,13 @@ function presentAlertPrompt() {
value: 'hello',
placeholder: 'Placeholder 2'
},
+ // multiline input.
+ {
+ name: 'paragraph',
+ id: 'paragraph',
+ type: 'textarea',
+ placeholder: 'Placeholder 3'
+ },
{
name: 'name3',
value: 'http://ionicframework.com',
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 657858a6ec9..cfa15748b58 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -131,6 +131,11 @@
placeholder: 'Placeholder 3',
disabled: true
},
+ {
+ type: 'textarea',
+ placeholder: 'Placeholder 4',
+ value: 'Textarea hello'
+ },
{
name: 'name3',
type: 'text',
diff --git a/core/src/components/alert/test/preview/index.html b/core/src/components/alert/test/preview/index.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md
index d40bafdbd11..14a8f06e3a4 100644
--- a/core/src/components/alert/usage/angular.md
+++ b/core/src/components/alert/usage/angular.md
@@ -73,6 +73,13 @@ export class AlertExample {
value: 'hello',
placeholder: 'Placeholder 2'
},
+ // multiline input.
+ {
+ name: 'paragraph',
+ id: 'paragraph',
+ type: 'textarea',
+ placeholder: 'Placeholder 3'
+ },
{
name: 'name3',
value: 'http://ionicframework.com',
diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md
index 0edf9b03311..496d1ffdb5c 100644
--- a/core/src/components/alert/usage/javascript.md
+++ b/core/src/components/alert/usage/javascript.md
@@ -58,6 +58,13 @@ function presentAlertPrompt() {
value: 'hello',
placeholder: 'Placeholder 2'
},
+ // multiline input.
+ {
+ name: 'paragraph',
+ id: 'paragraph',
+ type: 'textarea',
+ placeholder: 'Placeholder 3'
+ },
{
name: 'name3',
value: 'http://ionicframework.com',
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index b066e44aab5..39d9df4ed6e 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -36,7 +36,6 @@ export * from './utils/overlays-interface';
export * from './global/config';
export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
-// Global aux types
export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';
export type Side = 'start' | 'end';
export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';