使用标签将底部和顶部放置在同一页的Ionic 4中
使用标签将底部和顶部放置在同一页的Ionic 4中
提问于 2020-01-19 02:27:53
我想在ionic 4中实现标签的顶部和底部在单个页面中的位置。目前，它们中的任何一个都在单个组件/页面中工作。
回答 1
Stack Overflow用户
发布于 2020-01-19 04:28:13
您只需添加另一个ion-tab-bar就可以做到这一点，这样一个“顶部”插槽和另一个“底部”插槽就会被占用：
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab4">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab Four</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab5">
<ion-icon name="apps"></ion-icon>
<ion-label>Tab Five</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>然后确保在tabs.router.module中正确设置了路由
https://stackblitz.com/edit/ionic4-angular-tabs-template-rag89y
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59803617
复制相关文章
相似问题
腾讯云开发者
