如何在标签栏或位置标签按钮中使用Fab-Button

Question

我想将fab-button的一半悬浮在离子棒的中间，就在离子棒的中间，但是Ionic-4中的ion-tab-button（图标）妨碍了操作。我已经通过使用CSS将fab按钮悬浮在选项卡栏上来实现了此功能（有限）。

它是这样出来的：

有没有一种方法可以将ion-tab-bar ion-tab-button放置在我希望沿着ion-tab-bar放置的位置，而不是Ionic想要放置它们的方式，即如果我在上面放置3个图标（按钮）标签栏，它们等距放置，因此中间按钮位于标签栏的中间。这基本上妨碍了我想浮动我的fab-button的方式，所以可以说将其中两个按钮移到最左边，将一个按钮移到最右边，这样我中间就有一个不错的空间浮动我的晶圆厂按钮？

这是我想要实现的方式：

或者，有没有一种方法可以将fab按钮集成为选项卡栏中的选项卡按钮之一。我意识到选项卡按钮的使用是在单击时导航/显示内容，因为fab-button单击是显示fab-button-list项目列表，所以我猜想它不能简单地放在里面标签栏。

希望有人能够理解我正在努力实现的目标并指导/帮助我。

非常感谢

罗伊

Answer 1

我认为您可以在其中添加一些空白标签以将它们隔开，例如：

<ion-tab-button tab=""> </ion-tab-button>

如果总共制作了7个标签，其中前两个是首页和纸张，接下来的4个是空白标签（从上方），最后一个是个人资料，那么您应该可以实现。

Answer 2

您可以执行以下操作：

<ion-tabs>
// Put your ion-tab-button here
</ion-tabs>

// Put your custom ion-fab here
<ion-fab horizontal="center" vertical="bottom" edge>
    <ion-fab-button>
      <ion-icon color="primary" name="aperture"></ion-icon>
    </ion-fab-button> 
</ion-fab>