javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 06:09:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

- add only-icon, badge-vertical-bottom usecase;

Browse Source
This commit is contained in:
João Ferreira
2025-08-28 15:24:33 +01:00
parent 291beb32bb
commit a72f4f7a90
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/badge/test/hint/index.html
View File

@ -396,6 +396,31 @@
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</div> </div>
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
<ion-tab-bar>
<ion-tab-button href="" tab="tab-one" layout="label-hide">
<ion-icon name="home"></ion-icon>
<ion-badge size="small" vertical="bottom" color="danger"></ion-badge>
</ion-tab-button>
<ion-tab-button tab="schedule" class="e2eTabTwoButton" layout="label-hide">
<ion-icon name="globe"></ion-icon>
<ion-badge size="small" vertical="bottom" color="primary">
<ion-icon name="star"></ion-icon>
</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-three" layout="label-hide">
<ion-icon name="logo-facebook"></ion-icon>
<ion-badge size="small" vertical="bottom" color="warning">999</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-four" class="e2eTabFourButton" layout="label-hide">
<ion-icon name="chatbox"></ion-icon>
<ion-badge vertical="bottom" color="success" size="small"></ion-badge>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-list> </ion-list>
<ion-list id="button-top"> <ion-list id="button-top">

10
core/src/components/tab-button/tab-button.ionic.scss
View File

@ -118,11 +118,11 @@
@include globals.position(globals.$ion-scale-050, null, null, calc(50% + globals.$ion-scale-250)); @include globals.position(globals.$ion-scale-050, null, null, calc(50% + globals.$ion-scale-250));
} }
:host ::slotted(ion-badge.badge-vertical-bottom) { :host(.tab-layout-icon-top) ::slotted(ion-badge.badge-vertical-bottom) {
@include globals.position(calc(50% - (globals.$ion-scale-050))); @include globals.position(calc(50% - (globals.$ion-scale-050)));
} }
:host ::slotted(ion-badge.badge-vertical-bottom:empty) { :host(.tab-layout-icon-top) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include globals.position(50%, null, null, calc(50% + globals.$ion-scale-250)); @include globals.position(50%, null, null, calc(50% + globals.$ion-scale-250));
} }
@ -143,10 +143,12 @@
@include globals.position(50%); @include globals.position(50%);
} }
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) { :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom),
:host(.tab-layout-label-hide) ::slotted(ion-badge.badge-vertical-bottom) {
@include globals.position(calc(100% - globals.$ion-scale-100)); @include globals.position(calc(100% - globals.$ion-scale-100));
} }
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) { :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty),
:host(.tab-layout-label-hide) ::slotted(ion-badge.badge-vertical-bottom:empty) {
@include globals.position(calc(100% - globals.$ion-scale-050), null, null, calc(50% + globals.$ion-scale-250)); @include globals.position(calc(100% - globals.$ion-scale-050), null, null, calc(50% + globals.$ion-scale-250));
} }