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

Question

我想在离子选项卡栏的中间浮动一个 fab 按钮，但 Ionic-4 中的离子选项卡按钮（图标）会妨碍。我已经使用 css 将 fab 按钮浮动在选项卡栏上实现了这一点（有限）。

结果是这样的：

有没有办法将 ion-tab-bar ion-tab-buttons 定位在 ion-tab-bar 上我想要的位置，而不是 Ionic 想要放置它们的方式，即如果我在选项卡上放置 3 个图标（按钮） -bar 它们等距放置，因此中间按钮位于选项卡栏的中间。这基本上妨碍了我想要浮动 fab 按钮的位置，所以是否可以说将 2 个按钮移动到最左侧，将一个按钮移动到最右侧，这样中间就有一个很好的空间浮动我的 fab 按钮？

这就是我想要实现的目标：

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

希望有人能够理解我想要实现的目标并指导/帮助我。

非常感谢

罗伊

Answer 1

我认为你可以添加一些空选项卡来将它们隔开，例如：

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

如果您总共制作 7 个选项卡，其中前两个作为主页和纸张，接下来的 4 个作为空选项卡（从上面开始），最后一个作为配置文件，您应该能够实现此目的。

Answer 2

您可以使用开源自定义组件

ion-tab-bar-middle-fab

。它使用插槽概念来排列选项卡栏按钮，并将 fab 按钮放在中间的 fab 插槽中。

npm 包页面上有一个使用示例和更多信息：

https://www.npmjs.com/package/ion-tab-bar-middle-fab