feat: allow IonTabs to be used without a router outlet

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

[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.

[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