Ion-tabs without navigation

Hello! I want to add a tab bar for custom functions but without navigation. Click functions are working but tabs trying to use navigation. How i can make ion-tabs only for “click” functions, without navigation?
Chrome console:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/share'
Error: Cannot match any routes. URL Segment: 'tabs/share'

Here the code:


 <ion-header>
   <ion-toolbar>
     <ion-title>Test Page</ion-title>
     <ion-buttons slot="end">
       <ion-button (click)="settingsModal()"><ion-icon icon="cog"></ion-icon></ion-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content class="ion-padding" [scrollEvents]="true" (ionScroll)="scrollEvent($event)" (click)="contentClick()">
 
   <div #contentBlock>
     <ion-text [innerHTML]="content?.content">
     </ion-text>
   </div>
 
 </ion-content>
 
 <ion-tab-bar slot="bottom">
 
   <ion-tab-button tab="prev" (click)="prev()">
     <ion-icon name="arrow-back"></ion-icon>
     <ion-label>Prev</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="comment" (click)="chapterCommentsModal()">
     <ion-icon name="chatboxes"></ion-icon>
     <ion-label>Comment</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="share" (click)="presentShareSheet()">
     <ion-icon name="share-alt"></ion-icon>
     <ion-label>Share</ion-label>
   </ion-tab-button>
 
   <ion-tab-button tab="next" (click)="next()">
     <ion-icon name="arrow-forward"></ion-icon>
     <ion-label>Next</ion-label>
   </ion-tab-button>
 
 </ion-tab-bar>

I would suggest to use ion-segment for the custom tab like features inside your project it is easy to implement and would not involve the router navigations . that will be the best rather than using ion-tabs.

2 Likes

I got it working by using base Web components from @ionic/core

Posting it here, because I found this post on Google, and the only answer did not satisfy me.

// Import web components
import { IonTabButton as IonTabButtonHtml } from "@ionic/core/components/ion-tab-button";
import { IonTabBar as IonTabBarHtml } from "@ionic/core/components/ion-tab-bar";

// Add to JSX.IntrinsicElements
declare global {
    namespace JSX {
        interface IntrinsicElements {
            "ion-tab-bar": React.HTMLProps<IonTabBarHtml>;
            "ion-tab-button": React.HTMLProps<IonTabButtonHtml>;
        }
    }
}

// Render
<ion-tab-bar>
    <ion-tab-button disabled={!canUndo} onClick={undo}>
        <FontAwesomeIcon icon={["fas", "undo"]} />
        <IonLabel>Undo</IonLabel>
    </ion-tab-button>
    <ion-tab-button onClick={onClearClick}>
        <FontAwesomeIcon icon={["fas", "eraser"]} />
        Erase
    </ion-tab-button>
</ion-tab-bar>

1 Like