我无法按照屏幕截图 2 正确创建离子标签

Question

我正在努力做到这一点，但它并不成功。 截图 1 是我的工作视图。 主页图标顶部被切断。 请检查截图 2，我想要这个设计。 请检查下面的 IONIC 代码视图。

HTML 代码：

 <ion-tabs class="home-bottom-tabs">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{'Home' | translate}}</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="categories">
      <ion-icon name="grid"></ion-icon>
      <ion-label>{{'Category' | translate}}</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="cart">
      <ion-icon name="basket"></ion-icon>
      <ion-label>{{'Cart' | translate}}</ion-label>
      <ion-badge color="danger" *ngIf="data.count != 0">{{data.count}}</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS代码：

ion-badge {
    min-width: 18px; font-size: 12px; left: calc(50% + 3px);
}
ion-tab-bar {
    --border: 0; height: 64px; --background: #fff; box-shadow: rgba(0,11,35,0.15); overflow: inherit !important;
    ion-tab-button{ overflow: inherit !important;
        .button-native{
            overflow: inherit !important;
        }
        ion-icon{ color: #6c6c6c; margin: 0px; }
        &.tab-selected{ overflow: inherit !important;
            ion-icon{ min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; margin-top: -18px; position: relative; padding: 14px; border-radius: 100%; color: #fff; box-shadow: 0 10px 25px rgba(28, 122, 59,0.30);
                background: rgb(85,171,116);
                background: linear-gradient(81deg, rgba(85,171,116,1) 0%, rgba(99,195,95,1) 100%); }
        }
    }
}
ion-label{ color: #6c6c6c; font-size: 14px; margin-bottom: 0px; margin-top: 2px }

截图一：

截图二：

Answer 1

Ionic 的选项卡栏使用“包含”CSS 属性，允许浏览器通过告诉它确保没有内容会溢出元素的边界框来优化其呈现。 这正是您想要实现的目标。 这就像溢出：隐藏，但在较低级别。 你需要覆盖它。

1. ion-tab-bar 默认具有contain: strict ，与contain: size layout style paint相同。 “绘画”部分是您需要摆脱的 - 通过将其设置为contain: size layout style 。 这样，您至少可以从包含中获得一些性能优势，但浏览器将呈现溢出的内容。
2. ion-tab-button 将其内容包装到 a.button-native with overflow: hidden 。 这很棘手，因为它隐藏在它的 shadow dom 中。 因此，要从外部覆盖它，请使用::part 伪元素选择器。

将这样的内容添加到应用程序组件的样式表或全局样式表中应该可以解决问题（当然，您可以将 .importants 替换为类或更易于管理的类似内容 - 这仅用于演示）。

ion-tab-bar { 
    contain: size layout style  !important; 
}

ion-tab-button::part(native) {
    overflow: visible !important;
}

请参阅更新的小提琴： https://jsfiddle.net/930qmx1s/