如何在选项卡栏或定位选项卡按钮中使用Fab-Button

Question

我想在正中间的ion-tab-bar上浮动半个fab-button，但是Ionic-4中的ion-tab-button (图标)挡道了。我已经实现了这一点(有限的)使用css浮动在标签栏上的工厂按钮。

这就是它是如何产生的：

​

​

有没有办法将离子标签条离子标签按钮放置在我想要的位置，而不是离子想要放置它们的位置，例如，如果我将3个图标(按钮)放置在标签栏上，它们被均匀地分开放置，所以中间的按钮在标签栏的中间。这基本上妨碍了我想让我的fab-button浮动的地方，所以有没有可能把两个按钮移到最左边，一个按钮移到最右边，这样中间就有一个很好的空间让我浮动fab- button？

这就是我想要实现的方式：

​

​

或者，有没有办法将fab-button集成为tab-bar中的tab-button之一。我意识到tab-button的用途是在点击时导航/显示内容，因为fab-button点击是为了显示fab-button-list项的列表，所以我猜它不能简单地放在tab-bar中。

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

非常感谢

Rowie

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>