diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 52acb4396c..a0b88cf2dd 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2591,12 +2591,16 @@ declare global {
declare global {
interface HTMLIonItemElement extends HTMLStencilElement {
+ /**
+ * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+ */
+ 'button': boolean;
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color': string;
/**
- * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
+ * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
'detail': boolean;
/**
@@ -2612,10 +2616,6 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode': 'ios' | 'md';
- /**
- * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
- */
- 'tappable': boolean;
}
var HTMLIonItemElement: {
prototype: HTMLIonItemElement;
@@ -2634,12 +2634,16 @@ declare global {
}
namespace JSXElements {
export interface IonItemAttributes extends HTMLAttributes {
+ /**
+ * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
+ */
+ 'button'?: boolean;
/**
* The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
'color'?: string;
/**
- * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `tappable` property is present.
+ * If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href`, `onclick` or `button` property is present.
*/
'detail'?: boolean;
/**
@@ -2655,10 +2659,6 @@ declare global {
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
'mode'?: 'ios' | 'md';
- /**
- * Whether or not this item should be tappable. If true, a button tag will be rendered. Defaults to `false`.
- */
- 'tappable'?: boolean;
}
}
}
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index e0ca4db084..380641cf42 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -33,7 +33,7 @@ export class Item {
/**
* If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
- * is `ios` and an `href`, `onclick` or `tappable` property is present.
+ * is `ios` and an `href`, `onclick` or `button` property is present.
*/
@Prop() detail: boolean;
@@ -52,7 +52,7 @@ export class Item {
* Whether or not this item should be tappable.
* If true, a button tag will be rendered. Defaults to `false`.
*/
- @Prop() tappable = false;
+ @Prop() button = false;
@Prop() goBack = false;
@@ -99,7 +99,7 @@ export class Item {
childStyles = Object.assign(childStyles, this.itemStyles[key]);
}
- const clickable = !!(this.href || this.el.onclick || this.tappable);
+ const clickable = !!(this.href || this.el.onclick || this.button);
const TagType = clickable
? this.href ? 'a' : 'button'
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 2bca66d4ec..af5c6d6aa0 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -7,6 +7,14 @@
## Properties
+#### button
+
+boolean
+
+Whether or not this item should be tappable.
+If true, a button tag will be rendered. Defaults to `false`.
+
+
#### color
string
@@ -21,7 +29,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
boolean
If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
-is `ios` and an `href`, `onclick` or `tappable` property is present.
+is `ios` and an `href`, `onclick` or `button` property is present.
#### disabled
@@ -53,7 +61,9 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
-#### tappable
+## Attributes
+
+#### button
boolean
@@ -61,8 +71,6 @@ Whether or not this item should be tappable.
If true, a button tag will be rendered. Defaults to `false`.
-## Attributes
-
#### color
string
@@ -77,7 +85,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
boolean
If true, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
-is `ios` and an `href`, `onclick` or `tappable` property is present.
+is `ios` and an `href`, `onclick` or `button` property is present.
#### disabled
@@ -109,14 +117,6 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
-#### tappable
-
-boolean
-
-Whether or not this item should be tappable.
-If true, a button tag will be rendered. Defaults to `false`.
-
-
----------------------------------------------
diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
index 0171567c3b..78799fadbf 100644
--- a/core/src/components/item/test/buttons/index.html
+++ b/core/src/components/item/test/buttons/index.html
@@ -28,7 +28,7 @@
a[ion-item] secondary
-
+
button[ion-item]
diff --git a/core/src/components/item/test/standalone/index.html b/core/src/components/item/test/standalone/index.html
index 3805f9ad84..46902708a5 100644
--- a/core/src/components/item/test/standalone/index.html
+++ b/core/src/components/item/test/standalone/index.html
@@ -13,11 +13,11 @@
Item Text
-
+
Item Tappable Danger
-
+
Item Tappable Danger.activated