我试图使这一点，但它不成功。屏幕截图没有1是我的工作视图。首页图标顶部部分被切断。请检查屏幕截图没有2，我想要这个设计。请检查下面的离子代码视图。
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 }截图一：
截图二：
1条答案
按热度按时间6ju8rftf1#
Ionic的标签栏使用了“contain”CSS属性，通过告诉浏览器没有内容会溢出元素的边界框，允许浏览器优化其呈现。这正是你想要实现的。它就像溢出：隐藏，但在较低的层次。您需要覆盖它。
contain: strict，与contain: size layout style paint相同。“paint”部分需要去掉--将其设置为contain: size layout style。这样，您至少可以从包容中获得一些性能优势，但浏览器将呈现溢出的内容。1.默认情况下，ion-tab-button将其内容 Package 为一个.button-native，其值为
overflow: hidden。这很枣手，因为它隐藏在其阴影dom中。因此，要从外部覆盖它，请用途：：part伪元素选择器。将类似的内容添加到应用程序组件的样式表或全局样式表中应该可以达到这个目的（当然，您可以将！important替换为类或类似的更易于管理的内容--这只是为了演示）。
请参阅更新的fiddle：https://jsfiddle.net/930qmx1s/