How To Implement Multiple Tabs In The Same Page?

fikureyapin · August 3, 2019, 12:56pm

login-signup

I would like to achieve the above tab functionality. Like two tabs in the same page.

Please help me do it.

I am using Ionic-4

ChrisGriiffith · August 5, 2019, 2:42pm

Look at the ion-segment component to create your Login and Sign Up “tabs”

ishaquemujtaba · August 6, 2019, 1:06pm

Hi
do like this…

<ion-segment [(ngModel)]="category" color="success" style="width: 100%; display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    padding:0 5px 0 5px;">
  <ion-segment-button value="movies" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Overview
  </ion-segment-button>
  <!-- <ion-segment-button value="tvshows" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Education
  </ion-segment-button>
  <ion-segment-button value="animated" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Experience
  </ion-segment-button> -->
</ion-segment>

and inside ion-content like below

  <ion-card color="light">
    <ion-card-content>
      <table class="fixed" style="width: 100%;">
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Employee Id</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.EmployeeID}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Phone</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.Mobile}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Email </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.Email01}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Birthday</td>
          <td style="width: 50%;" text-right> {{removeTime(loginEmployeeDetail.DateOfBirth)}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Gender</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.Gender}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Address </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.Address}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Hire Date</td>
          <td style="width: 50%;" text-right> {{removeTime(loginEmployeeDetail.HireDate)}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Department</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.DepartmentID}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Position </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Shift </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Skills </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
      </table>
    </ion-card-content>
  </ion-card>

</ion-list>

<ion-list *ngSwitchCase="'tvshows'">

  <ion-item>
    <ion-label>
      <span slot="start"
        style="height: 10px;width: 10px;background-color: #10BD7B;border-radius: 50%;display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">International college of arts and Science
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
              width: 10px;
              background-color: rgba(241,37,26,1);
              border-radius: 50%;
              display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">International college of arts and Science
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list *ngSwitchCase="'animated'">
  <ion-item>
    <ion-label>
      <span slot="start"
        style="height: 10px;width: 10px;background-color: #10BD7B;border-radius: 50%;display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
                  width: 10px;
                  background-color: rgba(241,37,26,1);
                  border-radius: 50%;
                  display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">A2Z Creatorz Mobile Leading Agency</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
                    width: 10px;
                    background-color: rgba(241,37,26,1);
                    border-radius: 50%;
                    display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">IITCS</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
</ion-list>

and inside ts file like below

public category: string = ‘movies’;
public categories: Array = [‘movies’, ‘tvshows’, ‘animated’]

customAlertOptions: any = {
header: ‘SAL’,
subHeader: ‘Select Driver’,
message: ‘Select a driver to assign him’,
translucent: true
};

cheers!!

ShadeAJ · August 7, 2019, 4:48am

@fikureyapin I know this is off topic but that login screen looks amazing!

Topic		Replies	Views
I want to have Ionic tabs all in one page ionic-v3	3	487	July 19, 2021
Multiple tabs in a all pages ionic-v3	2	643	September 26, 2019
[SOLVED] Tabs inside a page Ionic Angular	4	1883	December 18, 2019
Tabbed component Ionic React	1	559	July 24, 2021
99% can't solve this!? Creating two tab pages in Ionic (ion-tabs) ionic-v3	17	8228	July 19, 2021

How To Implement Multiple Tabs In The Same Page?

Related topics