web-dev-qa-db-ja.com

Ionicのイオンコンテンツ内にタブを挿入する方法

私のモバイルアプリケーションの開発には、常に素晴らしいフレームワークIonic=を使用しています。すべてが正常に動作しているようです。

アプリに何か特別なものを追加したい。イオンコンテンツの中にタブを入れたいのですが。

ボタンバーのタブを使用しています。これが正しい解決策であるかどうかはわかりません。

アプリで既にタブツールを使用していることもお知らせしたいので、私のapp.jsにはタブを移動するためのコードがいくつかあります。そのため、別のページに別のページを追加する方法がわかりません。

私のコード：

[〜＃〜] codepen [〜＃〜]

ここに私が欲しいものがあります：

Screenshot of what I want

ここに私のコードのいくつか：

<body>
<div> 
<ion-header-bar class="bar-stable">
     <button class="button button-clear button-positive" href="index.html">Retour</button>

      <h1 class="title">Détails</h1>

    </ion-header-bar>
<ion-content>

  <div class="item item-divider" style="height:45px">
      <div style="display:inline-block;  left:10px; position:absolute;">
   <h5>Competiton</h5>
   <h5>14th journey</h5>
          </div>
        <div style="display:inline-block;  right:10px; position:absolute;">
   <h5>25 MAI 2015</h5>
            <h5>18:00</h5>
          </div>
  </div>
  <div class="item item-text-wrap" style="height:100px">
   <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; left:10px; top:12px">
      <img src="http://upload.wikimedia.org/wikipedia/en/6/6a/Zte_Football_Club_Logo_90.png" style="width:55px; height:55px; position:absolute; right:10px; top:12px" >
      <h4 style="position:absolute; left:10px; top:70px">ASROME</h4> <h4 style="position:absolute; right:10px; top:70px">LAZIO</h4>
      <h4 style="position:absolute; left:150px; top:35px">3</h4> <h4 style="position:absolute; right:150px; top:35px">2</h4>
  </div>

<div class="button-bar">
<a class="button" tab-state ui-sref="home">Résumé</a>
  <a class="button" tab-state ui-sref="contact">Composition</a>

</div>

  </div>
  </body>
javascriptcssionic-frameworktabsionic-view
13
Yasser B.

同じ問題があったので、このように修正しました。

<ion-view view-title="Tabs">
    <ion-pane>
        <ion-tabs class="tabs-top">

            <!-- Tab 1 -->
            <ion-tab title="Tab 1" href="#/tab/tab1">
                <ion-nav-view name="tab-tab1">
                    <ion-content>
                        Tab 1 content
                    </ion-content>

                </ion-nav-view>
            </ion-tab>


            <!-- Tab 2 -->
            <ion-tab title="Tab 2" href="#/tab/tab2">
                <ion-nav-view name="tab-tab2">
                    <ion-content>
                        Tab 2 content
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
        </ion-tabs>

    </ion-pane>
</ion-view>
23
Grégoire Motot

アプリ内の異なるページ間をユーザーが行き来できるようにする場合は、セグメント化されたコントロールの代わりにタブバーを使用する必要があります。

ソリューションでは、セグメントを使用する必要があります。

http://ionicframework.com/docs/api/components/segment/Segment/

5
Camilo Soto

言うようにIonicドキュメント

注：イオン含有元素の内部にイオンタブを配置しないでください。特定のCSSバグを引き起こすことが知られています。

3
Olga Akhmetova