javascript 如何在 Ionic 中的离子内容中插入标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30460750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert tabs inside ion content in Ionic
提问by Yasser B.
Always using the awesome framework Ionic for developing my mobile application. everything seems to work fine.
总是使用很棒的框架 Ionic 来开发我的移动应用程序。一切似乎都很好。
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.
我还想让你知道我在我的应用程序中已经使用了选项卡工具，所以在我的 app.js 中，我确实有一些用于导航选项卡的代码。所以我不知道如何为另一页添加另一个。
My code :
我的代码：
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>
回答by Grégtheitroade Motot
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>
回答by Camilo Soto
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/
http://ionicframework.com/docs/api/components/segment/Segment/
回答by Olga Akhmetova
As says Ionic documentation
正如离子文档所说
Note: do not place ion-tabs inside of an ion-content element; it has been known to cause a certain CSS bug.
注意：不要将 ion-tabs 放在 ion-content 元素内；众所周知，它会导致某个 CSS 错误。
