feat: allow IonTabs to be used without a router outlet

[sean-perkins]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Each framework wrapper couples the ion-router-outlet within ion-tabs, prevent developers from using ion-tabs in a standalone context or passing in another router solution.

ion-tab implementations through our framework wrappers, should support a new flag/option to disable coupling the ion-router-outlet.

The web component implementation allows for this behavior, the framework wrappers do not; there shouldn't be a forced opinionation for using the base component.

Describe the Use Case

Applications that want to display content within their app, in a tabbed experience, without the complexities of routing or the need for routing; should be able to do so.

If I wanted to create an application that:

1. Displays a tab-like experience within a modal (separate from URL navigation)
2. Creates a learning module that uses tabs to separate the content, without navigation events when clicking through the tab

Describe Preferred Solution

<ion-tabs no-outlet>

  <ion-tab tab="tab-one">
    Tab 1 content
  </ion-tab>

  <ion-tab tab="tab-two">
    Tab 2 content
  </ion-tab>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab-one">
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-two">
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Describe Alternatives

Alternatives would include creating your own tabs component, that brings in ion-tab-bar and sets up all the opinionated styling of ion-tabs.

Related Code

No response

Additional Information

Similar issues/requests: #24991

[riderx]

@sean-perkins it seems the IonTabBar also need the router to get the active tab. Should both have this option? And that mean they need a way to init to the right tab ?

[riderx]

@sean-perkins i made a PR for changes in Vue

[sean-perkins]

Offline thought/conversation; we should be able to detect this based on the tab containing an outlet or not. It may be possible to drop the no-outlet complexity altogether and have it be automatic. Would just need to think through developer experience here. Typically we like to warn developers when they are missing a required configuration. If there is no flag to indicate you are trying to do something custom, we won't be able to provide those warnings back to the developer.

[riderx]

@sean-perkins seems a got solution to me, to auto-detect, but if that not the happy path I tend to say that better to have it explicit set to prevent support question etc

[KANekT]

@sean-perkins if use no-outlet - I know what I'm doing and not need an extra error & auto-detect. in my case, i need use in different layout, not in ion-tabs.

[kevinclarkadstech]

This definitely needs to be an option....It is allowed if just using vanilla JavaScript or Stencil, but React throws an error. Sometimes you just want simple, non-routeable tabs like what is actually shown in the example docs:

https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/tabs/index.html

[creolio]

Any update on this?

[thetaPC]

This feature was released in v8.3.0! Make sure to update to the latest version to access it.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.