feat: allow IonTabs to be used without a router outlet

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• 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.