带有五个选项卡的选项卡栏在离子中无法正确显示角处的选项卡

Question

我的应用程序有一个包含五个选项卡的选项卡栏。但是角落的标签显示不正确

html 文件中的标签栏代码是：

<ion-tab-bar slot="bottom">
<ion-tab-button tab="user">
  <ion-icon class="tab-icon" src="./assets/icon/user-icon.svg"></ion-icon>
  <ion-label> user</ion-label>
</ion-tab-button>
<ion-tab-button tab="history">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/history-icon.svg"
  ></ion-icon>
  <ion-label>Histroy</ion-label>
</ion-tab-button>

<ion-tab-button tab="Village">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/village-icon.svg"
  ></ion-icon>
  <ion-label>village</ion-label>
</ion-tab-button>

<ion-tab-button tab="control">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/Control-icon.svg"
  ></ion-icon>
  <ion-label>Control</ion-label>
</ion-tab-button>

<ion-tab-button tab="Suppport">
  <ion-icon
    class="tab-icon"
    src="./assets/icon/support-icon.svg"
  ></ion-icon>
  <ion-label>Support</ion-label>
</ion-tab-button>

scss 文件中标签栏的代码：

.tab-icon {
    zoom: 0.7;
}
ion-tab-button {
   --color: #000000;
   --color-selected: rgba(80, 158, 47, 0.9);
   // Background
   --background: white;
   --background-focused: white;
   --ripple-color: white;
}

如果有人遇到类似问题并解决了问题，请指导我。

Answer 1

这个问题可以通过设置标签按钮的最大宽度和字体大小来解决，例如：

ion-tab-button {
   --color: #000000;
   --color-selected: rgba(80, 158, 47, 0.9);
   // Background
   --background: white;
   --background-focused: white;
   --ripple-color: white;
   max-width: 80px;
   font-size: 6pt;
   font-family: Arial;
}

带有五个选项卡的选项卡栏在离子中无法正确显示角处的选项卡

tabbar with five tabs does not show tabs at corner properly in ionic

ionic-framework

angular

ionic4