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