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 {