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

- define padding space for ionic tab-button;

Browse Source 
- guarantee hover and focus occupies the height;
- when has a status-badge the top position should be always the same;
- add example with tab-buttons without label;
This commit is contained in:
João Ferreira
2025-08-27 16:47:02 +01:00
parent 8361fd2405
commit 92920440fc
2 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -366,6 +366,38 @@
</div> </div>
</ion-list> </ion-list>
<ion-list id="tab-button-icon-bottom">
<ion-list-header>
<ion-label> Inside Tab Button - Only Icon </ion-label>
</ion-list-header>
<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="top" 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="top" 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="top" 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="top" color="success" size="small"></ion-badge>
</ion-tab-button>
</ion-tab-bar>
</div>
</ion-list>
<ion-list id="button-top"> <ion-list id="button-top">
<ion-list-header> <ion-list-header>
<ion-label> Inside Button - Top Placement </ion-label> <ion-label> Inside Button - Top Placement </ion-label>

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

@ -7,6 +7,11 @@
:host { :host {
--focus-ring-color: #{globals.$ion-border-focus-default}; --focus-ring-color: #{globals.$ion-border-focus-default};
--focus-ring-width: #{globals.$ion-border-radius-025}; --focus-ring-width: #{globals.$ion-border-radius-025};
--padding-top: #{globals.$ion-space-100};
--padding-end: #{globals.$ion-space-400};
--padding-bottom: #{globals.$ion-space-100};
--padding-start: #{globals.$ion-space-400};
@include globals.typography(globals.$ion-body-action-xs); @include globals.typography(globals.$ion-body-action-xs);
@ -48,6 +53,7 @@
.button-native { .button-native {
min-width: globals.$ion-scale-1200; min-width: globals.$ion-scale-1200;
min-height: globals.$ion-scale-1200;
overflow: visible; overflow: visible;
@ -108,10 +114,6 @@
@include globals.position(-2px); @include globals.position(-2px);
} }
:host ::slotted(ion-badge.badge-vertical-top:empty) {
@include globals.position(calc(globals.$ion-scale-100 * -1));
}
:host ::slotted(ion-badge.badge-vertical-bottom) { :host ::slotted(ion-badge.badge-vertical-bottom) {
@include globals.position(calc(50% - globals.$ion-scale-200)); @include globals.position(calc(50% - globals.$ion-scale-200));
} }