diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 0123c6322b..80b2da6a10 100644
--- a/packages/core/src/components.d.ts
+++ b/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;
diff --git a/packages/core/src/components/tab-button/tab-button.scss b/packages/core/src/components/tab-button/tab-button.scss
index 12be6e2f1b..27427b1371 100644
--- a/packages/core/src/components/tab-button/tab-button.scss
+++ b/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);
diff --git a/packages/core/src/components/tab-button/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx
index 79497bea8c..65bc016265 100644
--- a/packages/core/src/components/tab-button/tab-button.tsx
+++ b/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 [
-
+
];
}
}
diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md
index 174630a965..b504b44113 100644
--- a/packages/core/src/components/tab/readme.md
+++ b/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 `` 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 `` anchor.
+
+
#### icon
string
diff --git a/packages/core/src/components/tab/tab.tsx b/packages/core/src/components/tab/tab.tsx
index 3d8659570a..e9b5df7a2c 100644
--- a/packages/core/src/components/tab/tab.tsx
+++ b/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 `` anchor.
+ */
+ @Prop() href: string;
+
/**
* The icon for the tab.
*/
@@ -120,9 +125,6 @@ export class Tab {
};
}
- render() {
- return ;
- }
}
function attachViewToDom(container: HTMLElement, cmp: string): Promise {