diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 7ec1216e4e..c191169071 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1338,6 +1338,8 @@ declare global {
color?: string;
href?: string;
mode?: 'ios' | 'md';
+ onclick?: (this: HTMLElement, ev: MouseEvent) => any;
+ tappable?: boolean;
}
}
}
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 8fac195f71..b7c4bf39d1 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -37,6 +37,18 @@ export class Item {
*/
@Prop() href: string;
+ /**
+ * @input {any} Callback function.
+ * If this property is set, a button tag will be rendered.
+ */
+ @Prop() onclick: (this: HTMLElement, ev: MouseEvent) => any;
+
+ /**
+ * @input {boolean} Whether or not this item should be tappable.
+ * If true, a button tag will be rendered. Default `true`.
+ */
+ @Prop() tappable = false;
+
@Listen('ionStyle')
itemStyle(ev: UIEvent) {
ev.stopPropagation();
@@ -87,8 +99,12 @@ export class Item {
this.hasStyleChange = false;
- // TODO add support for button items
- const TagType = this.href ? 'a' : 'div';
+ const clickable = this.href || this.onclick || this.tappable;
+
+ let TagType = 'div';
+ if (clickable) {
+ TagType = this.href ? 'a' : 'button';
+ }
return (
@@ -99,7 +115,7 @@ export class Item {
- { this.href && this.mode === 'md' && }
+ { clickable && this.mode === 'md' && }
);
}
diff --git a/packages/core/src/components/item/readme.md b/packages/core/src/components/item/readme.md
index 7e72c01bd6..c904ea2230 100644
--- a/packages/core/src/components/item/readme.md
+++ b/packages/core/src/components/item/readme.md
@@ -22,6 +22,16 @@ string
+#### onclick
+
+
+
+
+#### tappable
+
+boolean
+
+
## Attributes
#### color
@@ -39,6 +49,16 @@ string
+#### onclick
+
+
+
+
+#### tappable
+
+boolean
+
+
----------------------------------------------
diff --git a/packages/core/src/components/item/test/buttons/index.html b/packages/core/src/components/item/test/buttons/index.html
index 626c52ce8e..413a948960 100644
--- a/packages/core/src/components/item/test/buttons/index.html
+++ b/packages/core/src/components/item/test/buttons/index.html
@@ -28,16 +28,20 @@
a[ion-item] secondary
-
- button[ion-item]
+
+ button[ion-item] tappable click listener
-
- button[ion-item].activated
+
+ button[ion-item] ONCLICK
+
+
+
+ button[ion-item].activated onClick
- button[ion-item] danger
+ button[ion-item] danger onclick
@@ -134,6 +138,12 @@