2014-12-02 1 views
9

Sto provando a inserire l'intestazione e la barra di navigazione superiore all'interno della direttiva vista ionizzazione.Ionico dove inserire l'intestazione e la barra di navigazione superiore nella vista ionica?

Se inserisco la barra di navigazione dell'intestazione all'esterno della pagina di tag ion-view nera lampeggiante se la pagina è inizializzata.

Ma se provo a inserire l'intestazione e la barra di navigazione superiore all'interno del titolo ion-view e l'intestazione nell'intestazione non viene visualizzata.

Qualcuno potrebbe dirmi cosa sto facendo male?

Forse manca qualche tag all'interno?

Grazie per qualsiasi aiuto.

ecco il codice del template:

<div class="bar bar-header bar-positive has-tabs-top"> 
    <button class="button button-icon icon ion-chevron-left" ui-sref="home"> 
    </button> 
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1> 
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart"> 
    </button> 
</div> 

<!--TOP TAB BAR --> 
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark"> 
    <div class="tabs"> 
     <a class="tab-item orange"> 
     Home 
     </a> 
     <a class="tab-item"> 
     Favorites 
     </a> 
     <a class="tab-item"> 
     Settings 
     </a> 
    </div> 
</div> 

<ion-view> 
<div class="bar bar-header bar-positive has-tabs-top"> 
    <button class="button button-icon icon ion-chevron-left" ui-sref="home"> 
    </button> 
    <h1 class="title">{{ 'RESULTS_BY_DAY' | translate }}</h1> 
    <button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart"> 
    </button> 
</div> 

<!--TOP TAB BAR --> 
<div class="tabs-striped tabs-top tabs-background-light tabs-light tabs-color-dark"> 
    <div class="tabs"> 
     <a class="tab-item orange"> 
     Home 
     </a> 
     <a class="tab-item"> 
     Favorites 
     </a> 
     <a class="tab-item"> 
     Settings 
     </a> 
    </div> 
</div> 
    <ion-content ng-controller="DailyListCtrl"> 

     <!--WRITEOUT OVERAL STATS FOR DAYS --> 
     <ion-list class="list" > 
      <ion-item class="item itemListCustom" ng-repeat="listDataItem in listData"> 

        <div class="listDateTimeBlock"> 
        <div class="day"><h3>{{listDataItem.DATE_FROM_DD}}</h3></div> 
        <div class="month"><h3>{{listDataItem.DATE_FROM_MM}}</h3></div> 
        </div> 

       <!--ROW ONE -->     
       <div id="left"> 
        <div class="left-inner"> 
         {{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.SUCCESS_RATE}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'DIALS' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.DIALS_CNT}} 
        </div> 
       </div> 

       <!--ROW TWO--> 
       <div id="left"> 
        <div class="left-inner "> 
         {{ 'SUCCESS_RATE_SINCE_START' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.SUCCESS_RATE_SINCE}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'CONVERSATIONS' | translate }} : 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.CONVERS_CNT}} 
        </div> 
       </div>     

       <!--ROW THREE--> 
       <div id="left"> 
        <div class="left-inner"> 
         {{ 'MY_DEFICIT' | translate }}: 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.DEFICIT}} % 
        </div> 
       </div> 
       <div id="right"> 
        <div class="left-inner floatRight"> 
         {{ 'APPOINTMENTS' | translate }} : 
        </div> 
        <div class="right-inner"> 
         {{listDataItem.APPT_CNT}} 
        </div> 
       </div>     
      </ion-item> 
     </ion-list> 

    <ion-infinite-scroll 
     icon="ion-loading-c" 
     distance="30%" 
     on-infinite="setDateRange();"> 
    </ion-infinite-scroll> 

    </ion-content> 

    <!-- BOTTOM TABS --> 
    <div class="tabs-striped tabs-background-positive tabs-light"> 
    <div class="tabs"> 
     <a class="tab-item active" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-ios7-paper-outline"></i> 
     </a> 
     <a class="tab-item" ui-sref="weekly-list" href="/#/weekly-list"> 
     <i class="icon ion-star"></i> 
     </a> 
     <a class="tab-item" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-gear-a"></i> 
     </a> 
     <a class="tab-item" ui-sref="daily-list" href="/#/daily-list"> 
     <i class="icon ion-gear-a"></i> 
     </a> 
    </div> 
    </div> 
</ion-view> 
+0

clicco +1 perché basta leggere il codice che ho imparato come mettere nella parte superiore della pagina delle schede : basta aggiungere la classe 'tabs-top'. Grazie! –

+0

ciao .. (è un suggerimento) per il design realted cose in uso ionico questo link [** Usa questo link **] (https://creator.ionic.io/app/login) ionico ha il proprio tema bulider questo ti aiuterebbe ad avviare una soluzione tematica –

+0

Hai trovato una soluzione alla fine? – Jazjef

risposta

0

tenta di utilizzare la versione JavaScript di tabs e navigation bars.
Sono più facili da manipolare nel codice JS, perché vengono forniti con i servizi $ionicTabsDelegate e $ionicNavBarDelegate.

+2

Che potrebbe risolvere raggiungere lo stesso obiettivo, ma non è una risposta alla domanda e sto affrontando lo stesso identico problema E ' possibile aggiungere pulsanti alla barra di intestazione 'nav-view'? Dovrebbe supportare' ion-header-bar' o no? Se dovrebbe allora non funziona, almeno per me. –

+0

Ho lo stesso problema e didn ' t trovare una soluzione fino ad ora ... – user2471214

+0

anche io ... mi sto strappando i capelli per lo stesso problema qui. Ho un'intestazione superiore e poi sotto che hanno 2 riquadri, la barra sul lato sinistro e l'area del contenuto del riquadro principale sul lato destro. Ho un'intestazione secondaria per il pannello principale. Sotto questo sub-lui ader, voglio mostrare una barra di navigazione o schede, ma nessuno dei due appare ovunque io lo posizioni - sopra la vista ion-nav o in vista-ion - all'esterno o all'interno del contenuto di ioni. Perché la barra di navigazione non raggiunge semplicemente la parte superiore del suo div contenitore. – kkap

5

Ecco alcuni esempi di utilizzo della barra di navigazione:

  • semplice pagina con pulsanti sinistro e destro:

http://codepen.io/beaver71/pen/YwLELa

<ion-view title="onepage"> 
    <ion-nav-buttons side="left"> 
     <button class="button"> 
     LeftButton 
     </button> 
    </ion-nav-buttons>   
    <ion-nav-buttons side="right"> 
     <button class="button button-assertive"> 
     RightButton 
     </button> 
    </ion-nav-buttons>   

    <ion-content class="padding"> 
     <!-- The content of the page --> 
    </ion-content> 
    </ion-view> 
  • navigazione tramite menu laterale:

http://codepen.io/beaver71/pen/XXBvYp

  • navigazione tramite menu laterale e barra delle schede:

http://codepen.io/beaver71/pen/xZWXBO

Problemi correlati