div内のイオンタブの使い方

Question

私はionic1とangularjsで作業していますが、私はすでにタブで作業していましたが、今は私のタブが特定の場所にしか表示されないという問題に直面していますdivしたがって、私のHTMLページの私のイオンタブだけが動作するはずですが、私は私が期待しているようにうまく表示されていません。ここ

は私の.htmlのページでは、私はタブのdiv を実装しているし、ここで私がイオンのタブヘルプを使用する必要がありますサンプル画像があるイオンタブを見ることができます。ここ

<ion-modal-view> 

    <div class="bar bar-header bar-calm"> 
     <button class="button icon ion-navicon"></button> 
     <h1 class="title">Happy Home</h1> 
     <button class="button" ng-click="closeLogout()">LogOut</button> 
    </div> 

    <ion-content> 
     <div class = "row responsive-sm" style = "padding-top:50px"> 
      <div class = "col"> 
       <label class="item item-input item-select"> 
       <br> 
        <select> 
         <option>B09-301</option> 
         <option selected>G45-94</option> 
         <option>R8910</option> 
        </select> 
       </label> 
      </div> 
     </div> 
     <div style="background-color: #DEE0E0"> 
      <div class = "row"> 
       <div class = "col-33"> 
       <div class="card"> 
        <div class="item item-text-avatar" style="background-color: #11C1F3"> 
         <i class="icon ion-ios-home item-floating-label" ></i> 
         MEMBERS 
        </div> 
       </div> 
       </div> 
       <div class = "col-33"> 
       <div class="card"> 
        <div class="item item-text-avatar" style="background-color: #11C1F3"> 
        <i class="icon ion-model-s item-floating-label"></i> 
        Vechical 
        </div> 
       </div> 
       </div> 
       <div class = "col-33"> 
       <div class="card"> 
       <div class="item item-text-avatar" style="background-color: #11C1F3"> 
        <i class="icon ion-ios-bookmarks item-floating-label"></i> 
        Booking 
       </div> 
       </div> 
      </div> 
      </div> 

      <div class ="row"> 
       <div class = "col col-top"> 
        <div class="card"> 
         <div class="item item-text-avatar" style="background-color: #11C1F3"> 
          <i class="icon ion-person-stalker item-floating-label"></i> 
          Staff 
         </div> 
        </div> 
       </div> 
       <div class = "col col-top"> 
        <div class="card"> 
         <div class="item item-text-avatar" style="background-color: #11C1F3"> 
          <i class="icon ion-ios-home-outline item-floating-label"></i> 
          Visitor 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class = "row"> 
      <ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light"> 
       <ion-tab title="MyDues"> 
       <ion-content> 
        <h1>happy home Dues</h1> 
       </ion-content> 
       </ion-tab> 

       <ion-tab title="Deposite"> 
       <ion-content> 
        <h1>happy home Deposite</h1> 
       </ion-content> 
       </ion-tab> 

       <ion-tab title="Advance"> 
       <ion-content> 
        <h1>happy home Advance</h1> 
       </ion-content> 
       </ion-tab> 

       <ion-tab title="History"> 
       <ion-content> 
        <h1>happy home History</h1> 
       </ion-content> 
       </ion-tab> 
      </ion-tabs> 
     </div> 
    </ion-content> 

です私のためにイオンタブを使用する方法を知っている人がいれば私に私の誕生日、前払い、寄付金、履歴。

は私がイオン3に取り組んでいます、

Answer 1

をありがとう、私はこの方法を持って、私はイオンコンテンツ内のタブを入れて、私のために動作します。

<ion-content> 
<ion-card> 
    <ion-row fixed padding> 
     <ion-col> 
      <h2 class="card-titulo"> Localidade</h2> 
      <h2 class="card-titulo"> Data Início</h2> 
     </ion-col> 
     <ion-col> 
      <h2 class="card-descricao"> 
       <ion-icon name="pin"></ion-icon> 
       Fortaleza-CE 
      </h2> 
      <h2 class="card-descricao"> 
       <ion-icon name="calendar"></ion-icon> 
       24/01/18 10:47 
      </h2> 
     </ion-col> 
    </ion-row> 

    <ion-row> 
     <ion-col> 
      <ion-item> 
       <ion-label>Clima</ion-label> 
       <ion-select [(ngModel)]="clima"> 
        <ion-option>Frio</ion-option> 
        <ion-option>quente</ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-col> 
     <ion-col> 
      <ion-item> 
       <ion-label>Equipamento</ion-label> 
       <ion-select [(ngModel)]="equipamento"> 
        <ion-option>Medidor</ion-option> 
        <ion-option>Equipament teste</ion-option> 
       </ion-select> 
      </ion-item> 
     </ion-col> 
    </ion-row> 
</ion-card> 
<ion-content> 
    <tabs-obra></tabs-obra> 
</ion-content> 

<ion-fab bottom right> 
    <button ion-fab mini (click)="abrirListaAtividade()"> 
     <ion-icon name="checkmark"></ion-icon> 
    </button> 
</ion-fab>