Question

我正在使用ionic1和angularjs我已经使用过标签但是现在我遇到的问题是我的标签应该仅出现在特定的 div 中，所以在我的html页面的特定区域只有我的离子标签才能正常工作，但它并没有像我预期的那样显示出来。

这是我的.html页面

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

在这里，您可以看到 ion-tabs ，其中我已实现了tabs div 这里是我应该使用离子标签的示例图像，如果有人知道如何使用离子标签我的 MY DUES，ADVANCE，DEPOSIT，HISTORY 。 / p>

谢谢，

Answer 1

我正在研究离子3，我就是这样，我把标签放在离子内容中并为我工作。

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

Answer 2

放入<div>内，然后将此CSS添加到此div
width: 100%; position: fixed;

为我工作

如何在div中使用ion-tabs

2 个答案: