Wie man Registerkarten innerhalb des Ioneninhalts in Ionic einfügt

Immer das tolle Framework Ionic für die Entwicklung meiner mobilen Anwendung verwenden. Alles scheint gut zu funktionieren.Wie man Registerkarten innerhalb des Ioneninhalts in Ionic einfügt

Ich möchte etwas zu meiner App hinzufügen. Ich möchte Apps in einem Ionen-Content haben.

Ich benutze Knopfleiste Tabs. Ich bin mir nicht sicher, ob dies die richtige Lösung ist oder nicht.

Ich möchte Sie auch wissen lassen, dass ich bereits Tabs-Tool in meiner App verwende, also in meiner app.js habe ich einige Code für Nagisating Tabs. also weiß ich nicht, wie ich einen anderen für eine andere Seite hinzufügen könnte.

mein Code:

CODEPEN

hier ist das, was ich will:

Screenshot of what I want

hier einige meinen Code:

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

Quelle

2015-05-26 Yasser B.

hey haben Sie eine Lösung bekommen? .. – Lakshay

die Frage gleiche mit @Lakshay, haben Sie eine Lösung erhalten? –

ich hatte das gleiche Problem, Ich habe es so gemacht.

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

Quelle

2015-07-19 22:15:51

Tolle Lösung, funktioniert wie ein Charme! Danke! –

Sie haben mich gerettet von einer Menge '';) – Cody

einfach. reinigen. hat funktioniert. –

Wie sagt Ionic Dokumentation

Anmerkung: nicht ionen tabs innerhalb eines ionenInhaltsElement platzieren; Es ist bekannt, dass einen bestimmten CSS-Fehler verursacht.

Quelle

2015-10-19 09:17:06

das ist keine Antwort! –

@BraianMellor Ich denke es ist. Was OP will, passt nicht in das Paradigma von Ionic und die Dokumentation sagt es deutlich. –

"Wir sollten einen anderen Weg finden" ist ein Kommentar. Eine Antwort ist eine Antwort auf das Problem, dies nur ein Problem in das Problem, eine Antwort sollte in etwa so sein https://codepen.io/leoz/pen/gpMMmW?editors=1010 –

Sie sollten eine Tab-Leiste anstelle eines segmentierten Steuerelements verwenden, wenn Sie den Benutzer zwischen verschiedenen Seiten in Ihrer App hin- und hergehen lassen möchten.

Für Ihre Lösung müssen Sie Segmente verwenden.

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

Quelle

2017-06-22 23:36:26

Ich lösche meine Antwort, als ich deine sah ... Das ist der Weg :) –

Wie man Registerkarten innerhalb des Ioneninhalts in Ionic einfügt

Antwort

Verwandte Themen