Ionic 6中如何在Tab按钮上创建空ion-badge

我正在使用Ionic 6，想要在Tab按钮上添加类似Vuetify的红色空徽章样式，但Ionic中空徽章会不可见，目前用添加字符并将文字颜色设为背景色的临时方法，求更好的实现方案。

当前代码：

<ion-page>
    <ion-tabs>
        <ion-router-outlet></ion-router-outlet>
        <ion-tab-bar slot="bottom">
            <ion-tab-button tab="tabQr" href="/tabs/tabQr">
                <ion-icon :icon="qrCode" />
                <ion-label>QR</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="tabHome" href="/tabs/tabHome">
                <ion-icon :icon="home" />
                <ion-label>Home</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="tabVisit" href="/tabs/tabVisit">
                <ion-icon :icon="clipboard" />
                <ion-label>Visit</ion-label>
                <ion-badge color="danger" style="color: red">-</ion-badge>
            </ion-tab-button>

            <ion-tab-button tab="tabNfc" href="/tabs/tabNfc">
                <ion-icon :icon="radio" />
                <ion-label>Sensor</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>
</ion-page>

解决方案 #

方法1：自定义CSS强制设置徽章尺寸 #

Ionic的ion-badge在内容为空时会被隐藏，通过自定义CSS强制给徽章设置固定宽高，即可实现空徽章效果：

1. 在组件的CSS文件中添加样式：

/* 自定义空徽章样式 */
.empty-badge {
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  border-radius: 50%; /* 保持圆形外观 */
}

2. 修改Tab按钮中的徽章代码：

<ion-tab-button tab="tabVisit" href="/tabs/tabVisit">
  <ion-icon :icon="clipboard" />
  <ion-label>Visit</ion-label>
  <ion-badge color="danger" class="empty-badge"></ion-badge>
</ion-tab-button>

方法2：使用伪元素替代空徽章 #

如果不想依赖ion-badge组件，可通过给Tab按钮添加伪元素实现：

1. 添加CSS样式：

.tab-with-badge::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background-color: var(--ion-color-danger);
  border-radius: 50%;
}

2. 给目标Tab按钮添加类名：

<ion-tab-button tab="tabVisit" href="/tabs/tabVisit" class="tab-with-badge">
  <ion-icon :icon="clipboard" />
  <ion-label>Visit</ion-label>
</ion-tab-button>

说明 #

• 方法1基于原生ion-badge修改，保留组件的颜色主题特性，适合需要和Ionic主题统一的场景。
• 方法2更灵活，完全自定义位置和样式，适合不需要徽章其他交互的场景。

内容的提问来源于stack exchange，提问作者Denxorz