2015-08-07 39 views
10

İçeriği göstermeye çalışıyorum. Özel şablon dosyasına burada özel kod ekledim. İyonik sekmeler içerik göstermiyor

<ion-content> 


<ion-tabs class="tabs-positive tabs-icon-only"> 

    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline"> 
    My Content here 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline"> 
    My Content here 1 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline"> 
    My Content here 3 
    </ion-tab> 

</ion-tabs> 
    </ion-content> 
</ion-view> 

ben sekmeleri değil, içerik görmek mümkün buradayım

http://ionicframework.com/docs/api/directive/ionTabs/

örnek kod aldı. Ve evet eğer iyonik için örnek uygulama sekmesini takip edersem bunu yapabilirim. Ama bir tanesine ihtiyacım var.

İçeriği burada gösterebilir miyiz? Eğer örnek incelerseniz yakından göreceksiniz

+0

İyon sekmesi içindeki içeriği div veya bazı öğeler (

My Content here 1
) içinde sarmayı deneyebilir misiniz? İyon-sekmesi için alt öğelere bazı sınıflar eklenmiş gibi görünüyor. Ayrıca i-header-bar olmadan deneyebilirsiniz – Bharat

+0

varsa bunu denedim. Hala çalışmıyor –

cevap

7

olduğunu. Rota durumu, sekmede yer alacak içeriği yerleştirmek için görünümün adını kullanır.

<script id="templates/home.html" type="text/ng-template"> 
    <ion-view view-title="Home"> 
    <ion-content class="padding"> 
     <p> 
     // Your content 
     </p> 
    </ion-content> 
    </ion-view> 
</script> 
: işaretlemesinde şablonun kimliğine rotanın templateUrl kullanarak ilişkilendiren bir şablon kullanılarak

// Notice the referenced view is "home-tab" 
.state('tabs.home', { 
    url: "/home", 
    views: { 
    'home-tab': { 
     templateUrl: "templates/home.html", 
     controller: 'HomeTabCtrl' 
    } 
    } 
}) 

// Which correlates to the name of the view, which is also "home-tab" 
<ion-tab title="Home" icon="ion-home" href="#/tab/home"> 
    <ion-nav-view name="home-tab"></ion-nav-view> 
</ion-tab> 

Sen (örnekteki gibi) aynı dosya içinde kolayca ekleyebilirsiniz

İyonik sekmeleri ayarlama hakkında biraz daha fazla bilgi için bu post da var.

3

, her sekme girişi ion-nav-view içerir ve her nav-view aslında içeriğini belirtmek ion-content ile ion-view olduğunu.

Kodunuzda, sekme öğeleri, aslında tam tersi olan ion-content içine sarılır. İşte

Sen sekmeleri yönergesi içinde içerik yüklemek için bir görünüm kullanmak zorunda biraz basitleştirilmiş bir örnek http://codepen.io/anon/pen/XbOLzY

+0

evet .. ama iyon-nav-view kullanmak istemiyorum. Yukarıdaki örnekte yapamadım –

+0

Seni öptüm, bu problemi saatlerce yaşadım, cevabın benim sorunum çözülmesine yardımcı oldu. – user3718908