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

fix(tab-bar): update ios icon and label design to match native (#20548)

Browse Source
This commit is contained in:
Brandy Carney
2020-02-19 11:32:45 -05:00
committed by GitHub
parent 59fa340650
commit 34f8576b95
3 changed files with 47 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
core/src/components/tab-bar/test/spec/index.html
View File

@ -30,6 +30,36 @@
</ion-tab-bar> </ion-tab-bar>
<!-- Default -->
<ion-tab-bar selected-tab="2">
<ion-tab-button tab="1">
<ion-label>Favorites</ion-label>
<ion-icon name="star"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="2">
<ion-label>Recents</ion-label>
<ion-icon name="time"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="3">
<ion-label>Contacts</ion-label>
<ion-icon name="person-circle-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="4">
<ion-label>Keypad</ion-label>
<ion-icon name="apps"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="5">
<ion-label>Voicemail</ion-label>
<ion-icon name="recording-outline"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<!-- Badges --> <!-- Badges -->
<ion-tab-bar selected-tab="1"> <ion-tab-bar selected-tab="1">
<ion-tab-button tab="1"> <ion-tab-button tab="1">

26
core/src/components/tab-button/tab-button.ios.scss
View File

@ -12,15 +12,6 @@
font-size: $tab-button-ios-font-size; font-size: $tab-button-ios-font-size;
} }
:host(.tab-has-label-only) ::slotted(ion-label) {
@include margin(2px, 0);
font-size: $tab-button-ios-font-size + 2;
font-size: 14px;
line-height: 1.1;
}
// iOS Tab Button: Badge // iOS Tab Button: Badge
// -------------------------------------------------- // --------------------------------------------------
@ -41,7 +32,7 @@
// -------------------------------------------------- // --------------------------------------------------
::slotted(ion-icon) { ::slotted(ion-icon) {
@include margin(4px, null, null, null); @include margin(2px, null, 2px, null);
font-size: $tab-button-ios-icon-size; font-size: $tab-button-ios-icon-size;
} }
@ -58,6 +49,21 @@
@include margin(0, null, 1px, null); @include margin(0, null, 1px, null);
min-height: $tab-button-ios-font-size + 1; min-height: $tab-button-ios-font-size + 1;
font-weight: 500;
}
// iOS Tab Button Label Only
// --------------------------------------------------
:host(.tab-has-label-only) ::slotted(ion-label) {
@include margin(2px, 0);
font-size: $tab-button-ios-font-size + 2;
font-size: 14px;
line-height: 1.1;
} }

2
core/src/themes/ionic.theme.default.ios.scss
View File

@ -16,7 +16,7 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,
$tabbar-ios-background: var(--ion-tab-bar-background, $background-color) !default; $tabbar-ios-background: var(--ion-tab-bar-background, $background-color) !default;
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default; $tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-550) !default; $tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-600) !default;
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
// iOS Toolbar // iOS Toolbar