Question

我的Ionic应用程序有一个底部标签，在这里我可以选择其他标签/页面。每个标签/页面的顶部标签都不同，但是我想保留整个应用程序的一些标题区域，右侧是应用程序的徽标，右侧是离子头像，单击时在其中可以选择其他用户。我该如何实现？

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

我该如何实现？另外，我无法在左边看到第一张图像，而在右边看到第二张图像，我在哪里错了？

Answer 1

您可以创建一个自定义标头组件，并在所需的位置添加标签。

例如：

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

并在所需的页面中添加<my-header>。

关于图像，您可以使用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>

如何在Ionic应用程序中保留相同的标题部分？

1 个答案: