html - 如何在 Ionic 3 中的个人资料图片下添加标签

Question

我主要是想在包含图片的 div 下添加标签，但标签显示在屏幕顶部。请帮我制作类似附图的东西。

<ion-header>
   <ion-navbar color="primary">
     <ion-buttons left>
       <button ion-button ion-only menuToggle>
         <ion-icon name="menu"></ion-icon>
       </button>
     </ion-buttons>
   <ion-title left>Profile</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <div text-center>
  <img src="../assets/imgs/Khumo_Avatar.jpg" class="custom-avatar" />
 </div>
 <button ion-button round outline small>Change picture</button>

 <!-- Tabs -->
 <ion-tabs tabsPlacement="bottom">
   <ion-tab tabIcon="heart" tabTitle="Profile" [root]="tab1"></ion-tab>
   <ion-tab tabIcon="star" tabTitle="Ratings" [root]="tab2"></ion-tab>
 </ion-tabs>

I want to do something like this

Answer 1

我认为，您应该使用 Segment 而不是 ab。这是一个简单的例子。您还应该引用 documentation

<div class="bar bar-header bar-dark">

  <ion-segment ng-model="categories" full="true"  assertive>
  <ion-segment-button value="movies">
    Movies
  </ion-segment-button>
  <ion-segment-button value="series">
    Series
  </ion-segment-button>
  <ion-segment-button value="animation">
    Animate
  </ion-segment-button>

</ion-segment>
  </div>
<ion-content class="has-header">

  <div ng-switch="categories">

    <ion-list ng-switch-when="movies">
      <ion-item>
        Batman Begins
      </ion-item>
      <ion-item>
        Transporter
      </ion-item>
      <ion-item>
        Million Dollar Baby
      </ion-item>
    </ion-list>

    <ion-list ng-switch-when="series">
      <ion-item>
        Game of Thrones
      </ion-item>
      <ion-item>
        Daredevil
      </ion-item>
      <ion-item>
        Arrow
      </ion-item>
    </ion-list>
    <ion-list ng-switch-when="animation">
      <ion-item>
        Ice Age
      </ion-item>
      <ion-item>
        Lion King
      </ion-item>
      <ion-item>
        Up
      </ion-item>
    </ion-list>

  </div>
</ion-content>