Menu
I am trying to show content. I added custom code here manually on custom template file.
<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>
I took example code from here
http://ionicframework.com/docs/api/directive/ionTabs/
I am able to see tabs, but not content. And yes if i follow sample app tab for ionic i am able to do this. But i need above one.
Can we show content here.
520
We can access the Ionic tabs by using the standard <ion-tabs> component. This component works as a router outlet to handle navigation. It does not provide any mechanism to switch between tabs. If you need to do switch between tabs, use <ion-tab-bar> as a direct child element of <ion-tabs>.
Selecting a Tab There are different ways you can select a specific tab from the tabs component. You can use the selectedIndex property to set the index on the <ion-tabs> element, or you can call select() from the Tabs instance after creation.
There is a simple way to implement that - moving the route you wish to hide the tab-bar to the tabs module, outside of tabs children routes. Moving this route to tabs routing module will hide tab-bar from the page.
You have to use a view to load content within the tabs directive. The route state uses the name of the view to place the content that will reside within the tab.
// 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>
You can add it easily within the same file (like in the example) using a template, which correlates using the templateUrl of the route to the id of the template in the markup:
<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>
For a bit more information on setting up tabs in ionic there's also this post.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
