refactor(tab-button): use <a href> instead of <button>

packages/core/src/components.d.ts

@@ -3194,6 +3194,7 @@ declare global {
       btnId?: string;
       component?: any;
       disabled?: boolean;
+      href?: string;
       icon?: string;
       name?: string;
       selected?: boolean;

packages/core/src/components/tab-button/tab-button.scss

@@ -24,6 +24,10 @@ ion-tab-button {
   user-select: none;
 }
 
+ion-tab-button a {
+  text-decoration: none;
+}
+
 .tab-cover {
   @include margin(0);
   @include padding(0);

packages/core/src/components/tab-button/tab-button.tsx

@@ -33,8 +33,11 @@ export class TabButton {
 
   @Listen('click')
   protected onClick(ev: UIEvent) {
-    this.ionTabbarClick.emit(this.tab);
+    if (!this.tab.disabled) {
+      this.ionTabbarClick.emit(this.tab);
+    }
     ev.stopPropagation();
+    ev.preventDefault();
   }
 
   private onKeyUp() {
@@ -73,18 +76,19 @@ export class TabButton {
 
   render() {
     const tab = this.tab;
+    const href = tab.href || '#';
+
     return [
-      <button
-        type='button'
+      <a
+        href={href}
         class='tab-cover'
         onKeyUp={this.onKeyUp.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        disabled={tab.disabled}>
+        onBlur={this.onBlur.bind(this)}>
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.title && <span class='tab-button-text'>{tab.title}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
         { this.mode === 'md' && <ion-ripple-effect/> }
-      </button>
+      </a>
     ];
   }
 }

packages/core/src/components/tab/readme.md

@@ -88,6 +88,13 @@ boolean
 If true, the user cannot interact with the tab. Defaults to `false`.
 
 
+#### href
+
+string
+
+The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+
+
 #### icon
 
 string
@@ -170,6 +177,13 @@ boolean
 If true, the user cannot interact with the tab. Defaults to `false`.
 
 
+#### href
+
+string
+
+The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+
+
 #### icon
 
 string

packages/core/src/components/tab/tab.tsx

@@ -22,6 +22,11 @@ export class Tab {
    */
   @Prop() title: string;
 
+  /**
+   * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+   */
+  @Prop() href: string;
+
   /**
    * The icon for the tab.
    */
@@ -120,9 +125,6 @@ export class Tab {
     };
   }
 
-  render() {
-    return <slot/>;
-  }
 }
 
 function attachViewToDom(container: HTMLElement, cmp: string): Promise<any> {