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(tabs): get the tabbar layout working with shadow DOM (#15113)

Browse Source 
- gets the `tabbarLayout` property working
- update badge position based on tabs layout
- fix the transforms for icon/text and icon size

fixes #14611
This commit is contained in:
Brandy Carney
2018-08-10 17:41:38 -04:00
committed by GitHub
parent 85ffe01675
commit 575c5eb292
10 changed files with 143 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,27 +39,3 @@
.tab-button-icon::before {
vertical-align: top;
}
.layout-icon-end .tab-button-ios .tab-button-text,
.layout-icon-start .tab-button-ios .tab-button-text,
.layout-icon-hide .tab-button-ios .tab-button-text {
@include margin(2px, 0);
font-size: 14px;
line-height: 1.1;
}
.layout-icon-end .tab-button-ios ion-icon,
.layout-icon-start .tab-button-ios ion-icon {
@include margin(2px, null, 1px, null);
min-width: 24px;
height: 26px;
font-size: 24px;
}
.layout-label-hide .tab-button-ios ion-icon {
@include margin(0);
}

44
core/src/components/tab-button/tab-button.md.scss
View File

@ -8,6 +8,7 @@
--color: #{$tab-button-md-text-color};
--color-selected: #{$tabbar-md-text-color-active};
--background-focused: #{$tabbar-md-background-color-focused};
--icon-transform-selected: #{$tab-button-md-icon-transform-active};
max-width: 168px;
@ -27,6 +28,8 @@
@include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
@include transform-origin(center, bottom);
transform: var(--label-transform);
transition: $tab-button-md-text-transition;
font-size: $tab-button-md-font-size;
@ -35,7 +38,7 @@
}
:host(.tab-selected) .tab-button-text {
transform: $tab-button-md-text-transform-active;
--label-transform: #{$tab-button-md-text-transform-active};
transition: $tab-button-md-text-transition;
}
@ -49,45 +52,10 @@
width: $tab-button-md-icon-size;
height: $tab-button-md-icon-size;
transform: var(--icon-transform);
transition: $tab-button-md-icon-transition;
font-size: $tab-button-md-icon-size;
}
// Tab layout: icon-top, icon-only, label-only
:host(.tab-selected) .tab-button-icon {
@include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
}
// Material Design Tab with Icon or Title only
// --------------------------------------------------
// Tab layout: icon-end
.layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active));
}
// Tab layout: icon-bottom
.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active));
}
// Tab layout: icon-start
.layout-icon-start .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active));
}
.layout-icon-top .tab-button-md .has-icon .tab-button-text {
@include margin(null, null, -2px, null);
}
.layout-icon-bottom .tab-button-md .tab-button-text {
@include transform-origin(center, top);
@include margin(-2px, null, null, null);
}
.layout-icon-hide .tab-button-md,
.layout-label-hide .tab-button-md {
justify-content: center;
}

46
core/src/components/tab-button/tab-button.md.vars.scss
View File

@ -55,49 +55,25 @@ $tab-button-md-text-capitalization: none !default;
$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;
/// @prop - Text transition for the tab button text
$tab-button-md-text-transition: transform .3s ease-in-out !default;
$tab-button-md-text-transition: transform .1s ease-in-out !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or label-only
$tab-button-md-icon-transform-x-active: 0 !default;
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or label-only
$tab-button-md-icon-transform-active: translate3d(0, -2px, 0) !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or label-only
$tab-button-md-icon-transform-y-active: -2px !default;
/// @prop - Transform for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-active: translate3d(6px, 0, 0) !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or label-only
$tab-button-md-icon-transform-z-active: 0 !default;
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-x-active: 2px !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-y-active: 0 !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-right
$tab-button-md-icon-right-transform-z-active: 0 !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-x-active: 0 !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-y-active: 2px !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
$tab-button-md-icon-bottom-transform-z-active: 0 !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-x-active: -2px !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-y-active: 0 !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-z-active: 0 !default;
/// @prop - Transform for the active tab button icon when the layout is icon-left
$tab-button-md-icon-left-transform-active: translate3d(-6px, 0, 0) !default;
/// @prop - Text transition for the tab button icon
$tab-button-md-icon-transition: transform .3s ease-in-out !default;
$tab-button-md-icon-transition: transform .1s ease-in-out !default;
/// @prop - Size of the tab button icon
$tab-button-md-icon-size: 24px !default;
$tab-button-md-icon-size: 22px !default;
/// @prop - Opacity of the inactive tab button
$tab-button-md-opacity: .7 !default;

78
core/src/components/tab-button/tab-button.scss
View File

@ -50,9 +50,9 @@ a {
display: flex;
flex-direction: column;
flex-direction: var(--flex-direction, column);
align-items: center;
justify-content: flex-start;
justify-content: var(--justify-content, flex-start);
width: 100%;
height: 100%;
@ -79,10 +79,29 @@ a {
opacity: .4;
}
.tab-button-text {
@include margin(var(--label-margin-top), null, var(--label-margin-bottom), null);
display: var(--label-display, block);
font-size: var(--label-font-size);
line-height: var(--label-line-height);
}
.tab-button-icon {
@include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);
display: var(--icon-display, block);
min-width: var(--icon-min-width);
height: var(--icon-height, 1em);
font-size: var(--icon-font-size);
}
.tab-button-text,
.tab-button-icon {
display: none;
align-self: center;
min-width: 26px;
@ -96,18 +115,13 @@ a {
box-sizing: border-box;
}
:host(.has-icon) .tab-button-icon,
:host(.has-label) .tab-button-text {
display: block;
}
:host(.has-label-only) .tab-button-text {
white-space: normal;
}
:host(.has-icon-only) .tab-button-native,
:host(.has-label-only) .tab-button-native {
justify-content: center;
--justify-content: center;
}
@ -116,7 +130,7 @@ a {
.tab-badge {
@include position(6%, 4%, null, null); // 4% fallback
@include position(null, calc(50% - 50px), null, null);
@include position(null, var(--badge-end, calc(50% - 30px)), null, null);
@include padding(1px, 6px);
box-sizing: border-box;
@ -130,42 +144,14 @@ a {
line-height: 16px;
}
:host(.has-icon) .tab-badge {
@include position(null, calc(50% - 30px), null, null);
:host(.has-label-only) .tab-badge {
--badge-end: #{calc(50% - 50px)};
}
// Tab Badges
// --------------------------------------------------
.layout-icon-start .tab-button {
flex-direction: row;
:host(.has-icon-only) .tab-badge {
--badge-end: #{calc(50% - 30px)};
}
.layout-icon-end .tab-button {
flex-direction: row-reverse;
}
.layout-icon-bottom .tab-button {
flex-direction: column-reverse;
}
.layout-icon-start .tab-button,
.layout-icon-end .tab-button,
.layout-icon-hide .tab-button,
.layout-label-hide .tab-button {
justify-content: center;
}
.layout-icon-hide .tab-button-icon,
.layout-label-hide .tab-button-text {
display: none;
}
.layout-icon-bottom .tab-badge,
.layout-icon-start .tab-badge,
.layout-icon-end .tab-badge {
@include position(null, calc(50% - 50px), null, null);
}
:host(.tab-selected) .tab-button-icon {
transform: var(--icon-transform-selected);
}

2
core/src/components/tab-button/tab-button.tsx
View File

@ -75,7 +75,7 @@ export class TabButton {
{ icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
{ label && <span class="tab-button-text">{label}</span> }
{ badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
{ mode === 'md' && <ion-ripple-effect tapClick={true}/> }
{ mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
</a>
];
}