为离子标签项目设计样式

Question

我正在使用 Ionic 4 并使用 Tabs 布局。

我必须像这样设计标签项

为此，tabs.page.html 就像

<ion-tabs>

    <ion-tab-bar slot="bottom" color="primary">
        ...

        <!-- center button with round border -->
        <ion-tab-button tab="ride" class="tab-btn-ride">
            <ion-icon name="bicycle"></ion-icon>
            <ion-label>Ride</ion-label>
        </ion-tab-button>

        ...

</ion-tabs>

要使按钮变圆，这里是 css

.tab-btn-ride {
  width: 4rem !important;
  height: 5rem;
  border-radius: 50% 50%;
  box-shadow: 0 0 0 1.5pt #ff9823;
  margin-bottom: 2rem;
  max-width: 5rem;
  z-index: 10;
  border: 3px solid white;
}

在开发过程中，这在浏览器中看起来很好（上图）。但是在生成 apk 之后，它在 Android 设备中看起来像下图。上部被剪裁或隐藏在页面视图下方。

我尝试增加 z-index 值但没有成功。

Answer 1

由于页脚高度，圆形图像被剪切。所以解决了这个问题如下

1. 增加页脚高度
2. 减小了圆形图像大小。