CODEWITHSUNDEEP
htmlcssangularionic-frameworkionic4
I love coding
I love coding

Reputation: 1191

How keep the same header section in a Ionic app?

my Ionic applications has a bottom tabs, where I can choice different tab/page. Each tab/page has different top tabs, but I want to keep the some header sections for the entire app, where on the right there is the Logo of the App and on the right an ion-avatar, where when I click on them I can choice different user. How Can I achieve this?

 <ion-header color="primary">
   <ion-item color="primary">
     <div width-50 item-start>
      <img src="assets/icon/myLogo.png">
    </div>
    <div width-50 item-end>
        <img src="assets/icon/avatar-icon.png">
      </div>
  </ion-item>


<ion-toolbar color="primary">
  <ion-segment [(ngModel)]="topTab"  (ionChange)="onTabChanged()">

   <ion-segment-button value="send" >
      <ion-icon color="light"  title="Invia" name="send">Invia</ion-icon>
     <ion-label>Invia</ion-label>
   </ion-segment-button>
   <ion-segment-button value="calendar" >
      <ion-icon color="light" title="Inviate" name="calendar"></ion-icon>
     <ion-label>Inviate</ion-label>
   </ion-segment-button>


 </ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>...

How Can I achieve this? Also I'm not able to se the first image on the left and the second one on the right, where am I wrong?

Upvotes: 0

Views: 708

Answers (1)

yazantahhan
yazantahhan

Reputation: 3110

You can create a custom header component and add the tag wherever you want.

For example:

@Component({
  selector: 'my-header',
  template: '<ion-header color="primary"> ... </ion-header>'
})
export class MyHeader{ ... }

and add <my-header> in the pages you want.

Regarding the images, you can use the grid system in Ionic.

<ion-grid>
  <ion-row>
    <ion-col>
      <img src="assets/icon/myLogo.png">
    </ion-col>
    <ion-col>
      <img src="assets/icon/avatar-icon.png">
    </ion-col>
  </ion-row>
</ion-grid>

Upvotes: 1

Related Questions