CODEWITHSUNDEEP
angularionic-frameworkionic4
GPiter
GPiter

Reputation: 799

Ion tabs change the content not the all page

I have this html :

<ion-content>
<ion-grid>
    <ion-row>
        <ion-col size="8">
            <ion-tabs>
                <ion-tab-bar slot="top">
                    <ion-tab-button tab="trend">
                        <ion-label>Trending</ion-label>
                    </ion-tab-button>

                    <ion-tab-button tab="not-trend">
                        <ion-label>Not Trend</ion-label>
                    </ion-tab-button>
                </ion-tab-bar>
            </ion-tabs>
        </ion-col>
        <ion-col size="4">Hi</ion-col>
    </ion-row>
</ion-grid>
<div class="content"></div>
</ion-content>

When I access : /campaigns I have this page with 2 tabs. Now I want to change only the content of div <div class="content"></div> and not to create a dedicated page for each tab. Is possible to do that without dedicated route for each tab ? Thx in advance

Upvotes: 0

Views: 697

Answers (1)

haron68
haron68

Reputation: 791

This is not what ion-tabs is meant to do. This is what ion-segment is for https://ionicframework.com/docs/api/segment

Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.

Upvotes: 1

Related Questions