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