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};
}
.tab-button-native {
@include padding(
$tab-button-ios-padding-top,
@ -26,7 +25,7 @@
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);
font-size: $tab-button-ios-font-size + 2;
@ -45,8 +44,6 @@
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 {
@ -66,6 +63,6 @@
font-size: 24px;
}
.layout-title-hide .tab-button-ios ion-icon {
.layout-label-hide .tab-button-ios ion-icon {
@include margin(0);
}

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

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

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

@ -65,10 +65,10 @@ export class TabButton {
hostData() {
const selected = this.selected;
const tab = this.tab;
const hasTitle = !!tab.label;
const hasLabel = !!tab.label;
const hasIcon = !!tab.icon;
const hasTitleOnly = (hasTitle && !hasIcon);
const hasIconOnly = (hasIcon && !hasTitle);
const hasLabelOnly = (hasLabel && !hasIcon);
const hasIconOnly = (hasIcon && !hasLabel);
const hasBadge = !!tab.badge;
return {
'role': 'tab',
@ -78,9 +78,9 @@ export class TabButton {
class: {
...createColorClasses(this.color),
'tab-selected': selected,
'has-title': hasTitle,
'has-label': hasLabel,
'has-icon': hasIcon,
'has-title-only': hasTitleOnly,
'has-label-only': hasLabelOnly,
'has-icon-only': hasIconOnly,
'has-badge': hasBadge,
'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/)*