Come inserire le schede all'interno del contenuto di ioni in Ionic

Sempre utilizzando l'eccezionale framework Ionic per lo sviluppo della mia applicazione mobile. tutto sembra funzionare bene.Come inserire le schede all'interno del contenuto di ioni in Ionic

Desidero aggiungere qualcosa di particolare alla mia app. Voglio avere app all'interno di un contenuto di ioni.

Sto utilizzando le schede della barra dei pulsanti. Non sono sicuro se questa sia la soluzione giusta o no.

Voglio anche farti sapere che sto usando già lo strumento tabs nella mia app, quindi nel mio app.js ho un po 'di codice per le schede nagging. quindi non so come potrei aggiungere un altro per un'altra pagina.

il mio codice:

CODEPEN

qui è quello che voglio:

Screenshot of what I want

qui alcuni del mio codice:

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

fonte

2015-05-26 Yasser B.

hey ha u ottenere qualche soluzione? .. – Lakshay

alla domanda stessa con @Lakshay, ha u ottenere qualche soluzione? –

Ho avuto lo stesso problema, L'ho risolto così.

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

fonte

2015-07-19 22:15:51

Ottima soluzione, funziona come un incantesimo! Grazie! –

Mi hai salvato da un sacco di '';) – Cody

semplice. pulito. lavorato. –

come dice la documentazione ionico

Nota: non posizionare ioni schede all'interno di un elemento di ioni contenuti; è noto che lo causa un certo errore CSS.

fonte

2015-10-19 09:17:06

questa non è una risposta! –

@BraianMellor Penso di si. Ciò che l'OP vuole non si adatta al paradigma di Ionic e la documentazione lo dice chiaramente. –

"dovremmo trovare un altro modo" è un commento. Una risposta è una risposta al problema, questo ha appena messo un problema nel problema, una risposta dovrebbe essere qualcosa di simile a questo https://codepen.io/leoz/pen/gpMMmW?editors=1010 –

È necessario utilizzare una barra delle linguette anziché un controllo segmentato quando si desidera consentire all'utente di spostarsi avanti e indietro tra pagine distinte nell'app.

Per la soluzione è necessario utilizzare segmenti.

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

fonte

2017-06-22 23:36:26

Ho cancellato la mia risposta quando ho visto il tuo ... Questo è il modo :) –

Come inserire le schede all'interno del contenuto di ioni in Ionic

risposta

Problemi correlati