Menu
Always using the awesome framework Ionic for developing my mobile application. everything seems to work fine.
I want to add something particular to my app. I want to have tabs inside a ion-content.
I'm using button bar tabs. I'm not sure if this is the right solution or no.
I want to also let you know that I'm using already tabs tool in my app, so in my app.js I do have some code for navigating tabs. So I don't know how I would be able to add another one for another page.
My code :
CODEPEN
Here is what I want :
Here some of my 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>
988
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.
I had the same problem, I fixed it like this.
<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>
You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
For your solution you must use segments.
http://ionicframework.com/docs/api/components/segment/Segment/
44
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
