fix(item): add support for rendering buttons inside of an item

TODO document

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;
     }
   }
 }

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 (
       <TagType class={themedClasses}>
@@ -99,7 +115,7 @@ export class Item {
           </div>
           <slot name='end'></slot>
         </div>
-        { this.href && this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
+        { clickable && this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </TagType>
     );
   }

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
+
+
 
 ----------------------------------------------
 

packages/core/src/components/item/test/buttons/index.html

@@ -28,16 +28,20 @@
           a[ion-item] secondary
         </ion-item>
 
-        <ion-item onclick="testClick(event)">
-          button[ion-item]
+        <ion-item tappable id="attachClick">
+          button[ion-item] tappable click listener
         </ion-item>
 
-        <ion-item class="activated" onclick="testClick(event)">
-          button[ion-item].activated
+        <ion-item ONCLICK="testClick(event)">
+          button[ion-item] ONCLICK
+        </ion-item>
+
+        <ion-item class="activated" onClick="testClick(event)">
+          button[ion-item].activated onClick
         </ion-item>
 
         <ion-item color="danger" onclick="testClick(event)">
-          button[ion-item] danger
+          button[ion-item] danger onclick
         </ion-item>
 
         <ion-item onclick="testClickOutsize(event)">
@@ -134,6 +138,12 @@
   </ion-app>
 
   <script>
+    const attach = document.getElementById('attachClick');
+
+    attach.addEventListener('click', (ev) => {
+      console.log('clicked me!', ev);
+    });
+
     function testClick(ev) {
       console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
     }