diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 5f6700af53..5a061e73fd 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3299,6 +3299,10 @@ declare global {
*/
'routerDirection': RouterDirection;
'state': 'valid' | 'invalid' | 'focus';
+ /**
+ * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
+ */
+ 'type': 'submit' | 'reset' | 'button';
}
}
@@ -3358,6 +3362,10 @@ declare global {
*/
'routerDirection'?: RouterDirection;
'state'?: 'valid' | 'invalid' | 'focus';
+ /**
+ * The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
+ */
+ 'type'?: 'submit' | 'reset' | 'button';
}
}
}
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 0e78e0672f..bc3c644f4d 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -61,15 +61,22 @@ export class Item {
*/
@Prop() lines?: 'full' | 'inset' | 'none';
- // TODO document this
- @Prop() state?: 'valid' | 'invalid' | 'focus';
-
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
@Prop() routerDirection?: RouterDirection;
+ // TODO document this
+ @Prop() state?: 'valid' | 'invalid' | 'focus';
+
+ /**
+ * The type of the button. Only used when an `onclick` or `button` property is present.
+ * Possible values are: `"submit"`, `"reset"` and `"button"`.
+ * Default value is: `"button"`
+ */
+ @Prop() type: 'submit' | 'reset' | 'button' = 'button';
+
@Listen('ionStyle')
itemStyle(ev: UIEvent) {
@@ -131,11 +138,11 @@ export class Item {
}
render() {
- const { href, detail, mode, win, state, detailIcon, el, routerDirection } = this;
+ const { href, detail, mode, win, state, detailIcon, el, routerDirection, type } = this;
const clickable = this.isClickable();
const TagType = clickable ? (href ? 'a' : 'button') : 'div';
- const attrs = TagType === 'button' ? { type: 'button' } : { href };
+ const attrs = TagType === 'button' ? { type: type } : { href };
const showDetail = detail != null ? detail : mode === 'ios' && clickable;
return (
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index 122c4b69a5..289a7ce5eb 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -35,6 +35,10 @@
button[ion-item]
+
+ button[ion-item] type="submit"
+
+
button[ion-item].activated