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): correct alignment for label/icon only tabs

Browse Source
This commit is contained in:
Brandy Carney
2018-07-10 15:10:47 -04:00
parent 26e67e74c5
commit b46c3e2039
6 changed files with 26 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,6 @@
--background-focused: #{$tabbar-ios-background-color-focused}; --background-focused: #{$tabbar-ios-background-color-focused};
} }
.tab-button-native { .tab-button-native {
@include padding( @include padding(
$tab-button-ios-padding-top, $tab-button-ios-padding-top,
@ -26,7 +25,7 @@
min-height: $tab-button-ios-font-size + 1; min-height: $tab-button-ios-font-size + 1;
} }
:host(.has-title-only) .tab-button-text { :host(.has-label-only) .tab-button-text {
@include margin(2px, 0); @include margin(2px, 0);
font-size: $tab-button-ios-font-size + 2; font-size: $tab-button-ios-font-size + 2;
@ -45,8 +44,6 @@
vertical-align: top; vertical-align: top;
} }
.layout-icon-end .tab-button-ios .tab-button-text, .layout-icon-end .tab-button-ios .tab-button-text,
.layout-icon-start .tab-button-ios .tab-button-text, .layout-icon-start .tab-button-ios .tab-button-text,
.layout-icon-hide .tab-button-ios .tab-button-text { .layout-icon-hide .tab-button-ios .tab-button-text {
@ -66,6 +63,6 @@
font-size: 24px; font-size: 24px;
} }
.layout-title-hide .tab-button-ios ion-icon { .layout-label-hide .tab-button-ios ion-icon {
@include margin(0); @include margin(0);
} }

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

@ -16,11 +16,7 @@
} }
.tab-button-native { .tab-button-native {
@include padding( @include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start);
$tab-button-md-padding-top,
$tab-button-md-padding-end,
$tab-button-md-padding-bottom,
$tab-button-md-padding-start);
display: flex; display: flex;
} }
@ -58,46 +54,28 @@
transition: $tab-button-md-icon-transition; transition: $tab-button-md-icon-transition;
} }
// Tab layout: icon-top, icon-only, title-only // Tab layout: icon-top, icon-only, label-only
:host(.tab-selected) .tab-button-icon { :host(.tab-selected) .tab-button-icon {
@include transform(translate3d( @include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
$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 // Material Design Tab with Icon or Title only
// -------------------------------------------------- // --------------------------------------------------
:host(.icon-only),
:host(.has-title-only) {
justify-content: center;
}
// Tab layout: icon-end // Tab layout: icon-end
.layout-icon-end .tab-button-md.tab-selected .tab-button-icon { .layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d( @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-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 // Tab layout: icon-bottom
.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon { .layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d( @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-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 // Tab layout: icon-start
.layout-icon-start .tab-button-md.tab-selected .tab-button-icon { .layout-icon-start .tab-button-md.tab-selected .tab-button-icon {
@include transform(translate3d( @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));
$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 { .layout-icon-top .tab-button-md .has-icon .tab-button-text {
@ -111,6 +89,6 @@
} }
.layout-icon-hide .tab-button-md, .layout-icon-hide .tab-button-md,
.layout-title-hide .tab-button-md { .layout-label-hide .tab-button-md {
justify-content: center; justify-content: center;
} }

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

@ -57,13 +57,13 @@ $tab-button-md-text-transform-active: scale3d($tab-button-md-font-size
/// @prop - Text transition for the tab button text /// @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 .3s ease-in-out !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only /// @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; $tab-button-md-icon-transform-x-active: 0 !default;
/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only /// @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; $tab-button-md-icon-transform-y-active: -2px !default;
/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only /// @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; $tab-button-md-icon-transform-z-active: 0 !default;
/// @prop - Transform x for the active tab button icon when the layout is icon-right /// @prop - Transform x for the active tab button icon when the layout is icon-right

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

@ -96,14 +96,19 @@ a {
} }
:host(.has-icon) .tab-button-icon, :host(.has-icon) .tab-button-icon,
:host(.has-title) .tab-button-text { :host(.has-label) .tab-button-text {
display: block; display: block;
} }
:host(.has-title-only) .tab-button-text { :host(.has-label-only) .tab-button-text {
white-space: normal; white-space: normal;
} }
:host(.has-icon-only) .tab-button-native,
:host(.has-label-only) .tab-button-native {
justify-content: center;
}
// Tab Badges // Tab Badges
// -------------------------------------------------- // --------------------------------------------------
@ -146,12 +151,12 @@ a {
.layout-icon-start .tab-button, .layout-icon-start .tab-button,
.layout-icon-end .tab-button, .layout-icon-end .tab-button,
.layout-icon-hide .tab-button, .layout-icon-hide .tab-button,
.layout-title-hide .tab-button { .layout-label-hide .tab-button {
justify-content: center; justify-content: center;
} }
.layout-icon-hide .tab-button-icon, .layout-icon-hide .tab-button-icon,
.layout-title-hide .tab-button-text { .layout-label-hide .tab-button-text {
display: none; display: none;
} }

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

@ -65,10 +65,10 @@ export class TabButton {
hostData() { hostData() {
const selected = this.selected; const selected = this.selected;
const tab = this.tab; const tab = this.tab;
const hasTitle = !!tab.label; const hasLabel = !!tab.label;
const hasIcon = !!tab.icon; const hasIcon = !!tab.icon;
const hasTitleOnly = (hasTitle && !hasIcon); const hasLabelOnly = (hasLabel && !hasIcon);
const hasIconOnly = (hasIcon && !hasTitle); const hasIconOnly = (hasIcon && !hasLabel);
const hasBadge = !!tab.badge; const hasBadge = !!tab.badge;
return { return {
'role': 'tab', 'role': 'tab',
@ -78,9 +78,9 @@ export class TabButton {
class: { class: {
...createColorClasses(this.color), ...createColorClasses(this.color),
'tab-selected': selected, 'tab-selected': selected,
'has-title': hasTitle, 'has-label': hasLabel,
'has-icon': hasIcon, 'has-icon': hasIcon,
'has-title-only': hasTitleOnly, 'has-label-only': hasLabelOnly,
'has-icon-only': hasIconOnly, 'has-icon-only': hasIconOnly,
'has-badge': hasBadge, 'has-badge': hasBadge,
'tab-button-disabled': tab.disabled, 'tab-button-disabled': tab.disabled,

11
core/src/components/tabs/test/translucent/readme.md
View File

@ -1,11 +0,0 @@
# translucent-page-tab
<!-- Auto Generated Below -->
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*