mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
refactor(tabs): move css to tab-button
This commit is contained in:
Manu Mtz.-Almeida
1
packages/core/src/components.d.ts
vendored
1
packages/core/src/components.d.ts
vendored
@ -2995,7 +2995,6 @@ declare global {
|
|||||||
}
|
}
|
||||||
namespace JSXElements {
|
namespace JSXElements {
|
||||||
export interface IonTabButtonAttributes extends HTMLAttributes {
|
export interface IonTabButtonAttributes extends HTMLAttributes {
|
||||||
mode?: 'ios' | 'md';
|
|
||||||
selected?: boolean;
|
selected?: boolean;
|
||||||
tab?: HTMLIonTabElement;
|
tab?: HTMLIonTabElement;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,10 @@
|
|||||||
|
|
||||||
.app-ios {
|
.app-ios {
|
||||||
|
|
||||||
@include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabs-ios-tab-height);
|
@include footer-safe-area(
|
||||||
|
$toolbar-ios-height,
|
||||||
|
$toolbar-ios-padding,
|
||||||
|
$tabbar-ios-height);
|
||||||
|
|
||||||
font-family: $font-family-ios-base;
|
font-family: $font-family-ios-base;
|
||||||
font-size: $font-size-ios-base;
|
font-size: $font-size-ios-base;
|
||||||
|
|||||||
@ -6,7 +6,10 @@
|
|||||||
|
|
||||||
.app-md {
|
.app-md {
|
||||||
|
|
||||||
@include footer-safe-area($toolbar-md-height, $toolbar-md-padding, $tabs-md-tab-height);
|
@include footer-safe-area(
|
||||||
|
$toolbar-md-height,
|
||||||
|
$toolbar-md-padding,
|
||||||
|
$tabbar-md-height);
|
||||||
|
|
||||||
font-family: $font-family-md-base;
|
font-family: $font-family-md-base;
|
||||||
font-size: $font-size-md-base;
|
font-size: $font-size-md-base;
|
||||||
|
|||||||
@ -7,15 +7,6 @@
|
|||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
#### mode
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The mode determines which platform styles to use.
|
|
||||||
Possible values are: `"ios"` or `"md"`.
|
|
||||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
|
||||||
|
|
||||||
|
|
||||||
#### selected
|
#### selected
|
||||||
|
|
||||||
boolean
|
boolean
|
||||||
@ -28,15 +19,6 @@ boolean
|
|||||||
|
|
||||||
## Attributes
|
## Attributes
|
||||||
|
|
||||||
#### mode
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
The mode determines which platform styles to use.
|
|
||||||
Possible values are: `"ios"` or `"md"`.
|
|
||||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
|
||||||
|
|
||||||
|
|
||||||
#### selected
|
#### selected
|
||||||
|
|
||||||
boolean
|
boolean
|
||||||
|
|||||||
68
packages/core/src/components/tab-button/tab-button.ios.scss
Normal file
68
packages/core/src/components/tab-button/tab-button.ios.scss
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
@import "./tab-button";
|
||||||
|
@import "./tab-button.ios.vars";
|
||||||
|
|
||||||
|
.tab-button-ios {
|
||||||
|
@include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start);
|
||||||
|
|
||||||
|
max-width: $tab-button-ios-max-width;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
|
font-size: $tab-button-ios-font-size;
|
||||||
|
color: $tab-button-ios-text-color;
|
||||||
|
|
||||||
|
fill: $tab-button-ios-icon-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enable-hover .tab-button-ios:hover,
|
||||||
|
.tab-button-ios.tab-selected {
|
||||||
|
color: $tab-button-ios-text-color-active;
|
||||||
|
|
||||||
|
fill: $tab-button-ios-icon-color-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-ios .tab-button-text {
|
||||||
|
@include margin(0, null, 1px, null);
|
||||||
|
|
||||||
|
min-height: $tab-button-ios-font-size + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-ios.has-title-only .tab-button-text {
|
||||||
|
font-size: $tab-button-ios-font-size + 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-ios .tab-button-icon {
|
||||||
|
@include margin(4px, null, 1px, null);
|
||||||
|
|
||||||
|
min-width: $tab-button-ios-icon-size + 5;
|
||||||
|
height: $tab-button-ios-icon-size;
|
||||||
|
|
||||||
|
font-size: $tab-button-ios-icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar-ios .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,
|
||||||
|
.tab-button-ios.has-title-only .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-title-hide .tab-button-ios ion-icon {
|
||||||
|
@include margin(0);
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
@import "../../themes/ionic.globals.ios";
|
||||||
|
|
||||||
|
// iOS Tabs
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Padding top on the tab button
|
||||||
|
$tab-button-ios-padding-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the tab button
|
||||||
|
$tab-button-ios-padding-end: 2px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the tab button
|
||||||
|
$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the tab button
|
||||||
|
$tab-button-ios-padding-start: $tab-button-ios-padding-end !default;
|
||||||
|
|
||||||
|
/// @prop - Max width of the tab button
|
||||||
|
$tab-button-ios-max-width: 240px !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the inactive tab button
|
||||||
|
$tab-button-ios-text-color: $tabbar-ios-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the active tab button
|
||||||
|
$tab-button-ios-text-color-active: $tabbar-ios-text-color-active !default;
|
||||||
|
|
||||||
|
/// @prop - Icon color of the inactive tab button
|
||||||
|
$tab-button-ios-icon-color: $tabbar-ios-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Icon color of the active tab button
|
||||||
|
$tab-button-ios-icon-color-active: $tabbar-ios-text-color-active !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the tab button text
|
||||||
|
$tab-button-ios-font-size: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Size of the tab button icon
|
||||||
|
$tab-button-ios-icon-size: 30px !default;
|
||||||
125
packages/core/src/components/tab-button/tab-button.md.scss
Normal file
125
packages/core/src/components/tab-button/tab-button.md.scss
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
@import "./tab-button";
|
||||||
|
@import "./tab-button.md.vars";
|
||||||
|
|
||||||
|
// Material Design Tab Button
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.tab-button-md {
|
||||||
|
@include padding(
|
||||||
|
$tab-button-md-padding-top,
|
||||||
|
$tab-button-md-padding-end,
|
||||||
|
$tab-button-md-padding-bottom,
|
||||||
|
$tab-button-md-padding-start);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
max-width: 168px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
font-weight: $tab-button-md-font-weight;
|
||||||
|
color: $tab-button-md-text-color;
|
||||||
|
|
||||||
|
fill: $tab-button-md-icon-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable .tab-button-md {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-md.tab-selected {
|
||||||
|
color: $tab-button-md-text-color-active;
|
||||||
|
|
||||||
|
fill: $tab-button-md-icon-color-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Tab Button Text
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.placement-top .tab-button-md.tab-selected .tab-button-icon,
|
||||||
|
.placement-top .tab-button-md.tab-selected .tab-button-text {
|
||||||
|
transform: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-md .tab-button-text {
|
||||||
|
@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);
|
||||||
|
|
||||||
|
font-size: $tab-button-md-font-size;
|
||||||
|
|
||||||
|
text-transform: $tab-button-md-text-capitalization;
|
||||||
|
transition: $tab-button-md-text-transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-md.tab-selected .tab-button-text {
|
||||||
|
transform: $tab-button-md-text-transform-active;
|
||||||
|
transition: $tab-button-md-text-transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Tab Button Icon
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.tab-button-md .tab-button-icon {
|
||||||
|
@include transform-origin(center, center);
|
||||||
|
|
||||||
|
width: $tab-button-md-icon-size;
|
||||||
|
height: $tab-button-md-icon-size;
|
||||||
|
|
||||||
|
font-size: $tab-button-md-icon-size;
|
||||||
|
|
||||||
|
transition: $tab-button-md-icon-transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab layout: icon-top, icon-only, title-only
|
||||||
|
.tab-button-md.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));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Material Design Tab with Icon or Title only
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.layout-icon-hide .tab-button-md,
|
||||||
|
.layout-title-hide .tab-button-md,
|
||||||
|
.tab-button-md.icon-only,
|
||||||
|
.tab-button-md.has-title-only {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
103
packages/core/src/components/tab-button/tab-button.md.vars.scss
Normal file
103
packages/core/src/components/tab-button/tab-button.md.vars.scss
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
@import "../../themes/ionic.globals.md";
|
||||||
|
|
||||||
|
// Material Design Tabs
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Padding top on the tab button
|
||||||
|
$tab-button-md-padding-top: 8px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding end on the tab button
|
||||||
|
$tab-button-md-padding-end: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding bottom on the tab button
|
||||||
|
$tab-button-md-padding-bottom: 10px !default;
|
||||||
|
|
||||||
|
/// @prop - Padding start on the tab button
|
||||||
|
$tab-button-md-padding-start: 12px, !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the inactive tab button text
|
||||||
|
$tab-button-md-font-size: 12px !default;
|
||||||
|
|
||||||
|
/// @prop - Font weight of the tab button text
|
||||||
|
$tab-button-md-font-weight: normal !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the inactive tab button
|
||||||
|
$tab-button-md-text-color: $tabbar-md-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Text color of the active tab button
|
||||||
|
$tab-button-md-text-color-active: $tabbar-md-text-color-active !default;
|
||||||
|
|
||||||
|
/// @prop - Icon color of the inactive tab button
|
||||||
|
$tab-button-md-icon-color: $tabbar-md-text-color !default;
|
||||||
|
|
||||||
|
/// @prop - Icon color of the active tab button
|
||||||
|
$tab-button-md-icon-color-active: $tabbar-md-text-color-active !default;
|
||||||
|
|
||||||
|
/// @prop - Font size of the active tab button text
|
||||||
|
$tab-button-md-font-size-active: 14px !default;
|
||||||
|
|
||||||
|
/// @prop - Margin top on the tab button text
|
||||||
|
$tab-button-md-text-margin-top: 0 !default;
|
||||||
|
|
||||||
|
/// @prop - Margin end on the tab button text
|
||||||
|
$tab-button-md-text-margin-end: $tab-button-md-text-margin-top !default;
|
||||||
|
|
||||||
|
/// @prop - Margin bottom on the tab button text
|
||||||
|
$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default;
|
||||||
|
|
||||||
|
/// @prop - Margin start on the tab button text
|
||||||
|
$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default;
|
||||||
|
|
||||||
|
/// @prop - Capitalization of the tab button text
|
||||||
|
$tab-button-md-text-capitalization: none !default;
|
||||||
|
|
||||||
|
/// @prop - Transform for the active tab button text
|
||||||
|
$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;
|
||||||
|
|
||||||
|
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-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
|
||||||
|
$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
|
||||||
|
$tab-button-md-icon-transform-z-active: 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 - Text transition for the tab button icon
|
||||||
|
$tab-button-md-icon-transition: transform .3s ease-in-out !default;
|
||||||
|
|
||||||
|
/// @prop - Size of the tab button icon
|
||||||
|
$tab-button-md-icon-size: 24px !default;
|
||||||
|
|
||||||
|
/// @prop - Opacity of the inactive tab button
|
||||||
|
$tab-button-md-opacity: .7 !default;
|
||||||
113
packages/core/src/components/tab-button/tab-button.scss
Normal file
113
packages/core/src/components/tab-button/tab-button.scss
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
@import "../../themes/ionic.globals";
|
||||||
|
|
||||||
|
ion-tab-button {
|
||||||
|
@include margin(0);
|
||||||
|
@include text-align(center);
|
||||||
|
@include border-radius(0);
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tab-disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-disabled > * {
|
||||||
|
opacity: .4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button-text,
|
||||||
|
.tab-button-icon {
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
min-width: 26px;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-icon .tab-button-icon,
|
||||||
|
.has-title .tab-button-text {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-title-only .tab-button-text {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab Badges
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.layout-icon-start .tab-button {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-title-hide .tab-button {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-hidden,
|
||||||
|
.layout-icon-hide .tab-button-icon,
|
||||||
|
.layout-title-hide .tab-button-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tab Badges
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.tab-badge {
|
||||||
|
@include position(6%, 4%, null, null); // 4% fallback
|
||||||
|
@include position(null, calc(50% - 50px), null, null);
|
||||||
|
@include padding(1px, 6px);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-icon .tab-badge {
|
||||||
|
@include position(null, calc(50% - 30px), null, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-icon-bottom .tab-badge,
|
||||||
|
.layout-icon-start .tab-badge,
|
||||||
|
.layout-icon-end .tab-badge {
|
||||||
|
@include position(null, calc(50% - 50px), null, null);
|
||||||
|
}
|
||||||
@ -2,18 +2,17 @@ import {Component, Element, Event, EventEmitter, Listen, Prop} from '@stencil/co
|
|||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-tab-button'
|
tag: 'ion-tab-button',
|
||||||
|
styleUrls: {
|
||||||
|
ios: 'tab-button.ios.scss',
|
||||||
|
md: 'tab-button.md.scss'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
export class TabButton {
|
export class TabButton {
|
||||||
|
|
||||||
@Element() el: HTMLElement;
|
@Element() el: HTMLElement;
|
||||||
|
|
||||||
/**
|
mode: string;
|
||||||
* The mode determines which platform styles to use.
|
|
||||||
* Possible values are: `"ios"` or `"md"`.
|
|
||||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
|
||||||
*/
|
|
||||||
@Prop() mode: 'ios' | 'md';
|
|
||||||
|
|
||||||
@Prop() selected = false;
|
@Prop() selected = false;
|
||||||
@Prop() tab: HTMLIonTabElement;
|
@Prop() tab: HTMLIonTabElement;
|
||||||
@ -62,26 +61,17 @@ export class TabButton {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const items = [];
|
|
||||||
const tab = this.tab;
|
const tab = this.tab;
|
||||||
|
return [
|
||||||
if (tab.icon) {
|
tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon>,
|
||||||
items.push(<ion-icon class='tab-button-icon' name={tab.icon}></ion-icon>);
|
tab.title && <span class='tab-button-text'>{tab.title}</span>,
|
||||||
}
|
tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge>,
|
||||||
if (tab.title) {
|
this.mode === 'md' && <ion-ripple-effect useTapClick={false} />
|
||||||
items.push(<span class='tab-button-text'>{tab.title}</span>);
|
];
|
||||||
}
|
|
||||||
if (tab.badge) {
|
|
||||||
items.push(<ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge>);
|
|
||||||
}
|
|
||||||
if (this.mode === 'md') {
|
|
||||||
items.push(<ion-ripple-effect />);
|
|
||||||
}
|
|
||||||
return items;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TabButtonEvent extends CustomEvent {
|
export interface TabButtonEvent extends CustomEvent<TabButtonEventDetail> {
|
||||||
detail: TabButtonEventDetail;
|
detail: TabButtonEventDetail;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
25
packages/core/src/components/tab-highlight/readme.md
Normal file
25
packages/core/src/components/tab-highlight/readme.md
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
# ion-tab-highlight
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Auto Generated Below -->
|
||||||
|
|
||||||
|
|
||||||
|
## Properties
|
||||||
|
|
||||||
|
#### selectedTab
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
#### selected-tab
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
----------------------------------------------
|
||||||
|
|
||||||
|
*Built with [StencilJS](https://stenciljs.com/)*
|
||||||
@ -7,9 +7,9 @@
|
|||||||
.tabbar-ios {
|
.tabbar-ios {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
height: $tabs-ios-tab-height;
|
height: $tabbar-ios-height;
|
||||||
|
|
||||||
border-top: $tabs-ios-border;
|
border-top: $tabbar-ios-border;
|
||||||
background-color: $tabbar-ios-background-color;
|
background-color: $tabbar-ios-background-color;
|
||||||
|
|
||||||
contain: strict;
|
contain: strict;
|
||||||
@ -17,90 +17,13 @@
|
|||||||
|
|
||||||
.tabbar-ios.placement-top {
|
.tabbar-ios.placement-top {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-bottom: $tabs-ios-border;
|
border-bottom: $tabbar-ios-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar-ios .tabbar-highlight {
|
.tabbar-ios .tabbar-highlight {
|
||||||
background: $tabbar-ios-text-color-active;
|
background: $tabbar-ios-text-color-active;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar-ios > ion-tab-button {
|
|
||||||
@include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start);
|
|
||||||
|
|
||||||
max-width: $tabs-ios-tab-max-width;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
font-size: $tabs-ios-tab-font-size;
|
|
||||||
color: $tabs-ios-tab-text-color;
|
|
||||||
|
|
||||||
fill: $tabs-ios-tab-icon-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.enable-hover .tabbar-ios ion-tab-button:hover,
|
|
||||||
.tabbar-ios .tab-selected {
|
|
||||||
color: $tabs-ios-tab-text-color-active;
|
|
||||||
|
|
||||||
fill: $tabs-ios-tab-icon-color-active;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios .tab-button-text {
|
|
||||||
@include margin(0, null, 1px, null);
|
|
||||||
|
|
||||||
min-height: $tabs-ios-tab-font-size + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios .has-title-only .tab-button-text {
|
|
||||||
font-size: $tabs-ios-tab-font-size + 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios .tab-button-icon {
|
|
||||||
@include margin(4px, null, 1px, null);
|
|
||||||
|
|
||||||
min-width: $tabs-ios-tab-icon-size + 5;
|
|
||||||
height: $tabs-ios-tab-icon-size;
|
|
||||||
|
|
||||||
font-size: $tabs-ios-tab-icon-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios .tab-button-icon::before {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios.layout-icon-end .tab-button-text,
|
|
||||||
.tabbar-ios.layout-icon-start .tab-button-text,
|
|
||||||
.tabbar-ios.layout-icon-hide .tab-button-text,
|
|
||||||
.tabbar-ios .has-title-only .tab-button-text {
|
|
||||||
|
|
||||||
@include margin(2px, 0);
|
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios.layout-icon-end ion-icon,
|
|
||||||
.tabbar-ios.layout-icon-start ion-icon {
|
|
||||||
@include margin(2px, null, 1px, null);
|
|
||||||
|
|
||||||
min-width: 24px;
|
|
||||||
height: 26px;
|
|
||||||
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-ios.layout-title-hide ion-icon {
|
|
||||||
@include margin(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// .tabs-ios[tabsLayout=icon-hide] ion-tab-button,
|
|
||||||
// .tabs-ios ion-tab-button.has-title-only {
|
|
||||||
// min-height: $tabs-ios-tab-min-height - 8;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .tabs-ios[tabsLayout=title-hide] ion-tab-button,
|
|
||||||
// .tabs-ios ion-tab-button.icon-only {
|
|
||||||
// min-height: $tabs-ios-tab-min-height - 8;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// iOS Translucent Tabbar
|
// iOS Translucent Tabbar
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@ -131,11 +54,12 @@
|
|||||||
fill: $color-contrast;
|
fill: $color-contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar-ios-#{$color-name} ion-tab-button {
|
.tabbar-ios-#{$color-name} .tab-button {
|
||||||
color: $color-contrast;
|
color: $color-contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar-ios-#{$color-name} ion-tab-button:hover:not(.disable-hover), .tabbar-ios-#{$color-name} .tab-selected {
|
.tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover),
|
||||||
|
.tabbar-ios-#{$color-name} .tab-selected {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
color: $color-contrast;
|
color: $color-contrast;
|
||||||
|
|||||||
@ -3,44 +3,11 @@
|
|||||||
// iOS Tabs
|
// iOS Tabs
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/// @prop - Height of the tabbar
|
||||||
|
$tabbar-ios-height: 50px !default;
|
||||||
|
|
||||||
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
/// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
|
||||||
$tabs-ios-border: $hairlines-width solid $tabbar-ios-border-color !default;
|
$tabbar-ios-border: $hairlines-width solid $tabbar-ios-border-color !default;
|
||||||
|
|
||||||
/// @prop - Padding top on the tab button
|
|
||||||
$tabs-ios-tab-padding-top: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Padding end on the tab button
|
|
||||||
$tabs-ios-tab-padding-end: 2px !default;
|
|
||||||
|
|
||||||
/// @prop - Padding bottom on the tab button
|
|
||||||
$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default;
|
|
||||||
|
|
||||||
/// @prop - Padding start on the tab button
|
|
||||||
$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default;
|
|
||||||
|
|
||||||
/// @prop - Max width of the tab button
|
|
||||||
$tabs-ios-tab-max-width: 240px !default;
|
|
||||||
|
|
||||||
/// @prop - Minimum height of the tab button
|
|
||||||
$tabs-ios-tab-height: 50px !default;
|
|
||||||
|
|
||||||
/// @prop - Text color of the inactive tab button
|
|
||||||
$tabs-ios-tab-text-color: $tabbar-ios-text-color !default;
|
|
||||||
|
|
||||||
/// @prop - Text color of the active tab button
|
|
||||||
$tabs-ios-tab-text-color-active: $tabbar-ios-text-color-active !default;
|
|
||||||
|
|
||||||
/// @prop - Icon color of the inactive tab button
|
|
||||||
$tabs-ios-tab-icon-color: $tabbar-ios-text-color !default;
|
|
||||||
|
|
||||||
/// @prop - Icon color of the active tab button
|
|
||||||
$tabs-ios-tab-icon-color-active: $tabbar-ios-text-color-active !default;
|
|
||||||
|
|
||||||
/// @prop - Font size of the tab button text
|
|
||||||
$tabs-ios-tab-font-size: 10px !default;
|
|
||||||
|
|
||||||
/// @prop - Size of the tab button icon
|
|
||||||
$tabs-ios-tab-icon-size: 30px !default;
|
|
||||||
|
|
||||||
/// @prop - Filter of the translucent tabbar
|
/// @prop - Filter of the translucent tabbar
|
||||||
$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
|
$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default;
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
@import "./tabbar.md.vars";
|
@import "./tabbar.md.vars";
|
||||||
|
|
||||||
.tabbar-md {
|
.tabbar-md {
|
||||||
height: $tabs-md-tab-height;
|
height: $tabbar-md-height;
|
||||||
|
|
||||||
border-top: 1px solid $tabbar-md-border-color;
|
border-top: $tabbar-md-border;
|
||||||
background: $tabbar-md-background-color;
|
background: $tabbar-md-background-color;
|
||||||
|
|
||||||
contain: strict;
|
contain: strict;
|
||||||
@ -14,125 +14,12 @@
|
|||||||
background: $tabbar-md-text-color-active;
|
background: $tabbar-md-text-color-active;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Material Design Tab Button
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.tabbar-md ion-tab-button {
|
|
||||||
@include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start);
|
|
||||||
|
|
||||||
// min-height: $tabs-md-tab-min-height;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
max-width: 168px;
|
|
||||||
// min-width: 80px;
|
|
||||||
// Maximum: 168dp
|
|
||||||
// Minimum: 96dp
|
|
||||||
// max-width: 96px;
|
|
||||||
// min-width: 56px;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
font-weight: $tabs-md-tab-font-weight;
|
|
||||||
color: $tabs-md-tab-text-color;
|
|
||||||
|
|
||||||
fill: $tabs-md-tab-icon-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md.scrollable ion-scroll {
|
.tabbar-md.scrollable ion-scroll {
|
||||||
@include margin(0, 8px);
|
@include margin(0, 8px);
|
||||||
|
|
||||||
max-width: 650px;
|
max-width: 650px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar-md.scrollable ion-tab-button {
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md .tab-selected {
|
|
||||||
color: $tabs-md-tab-text-color-active;
|
|
||||||
|
|
||||||
fill: $tabs-md-tab-icon-color-active;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Material Design Tab Button Text
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.tabbar-md.placement-top .tab-selected .tab-button-icon,
|
|
||||||
.tabbar-md.placement-top .tab-selected .tab-button-text {
|
|
||||||
transform: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md .tab-button-text {
|
|
||||||
@include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start);
|
|
||||||
|
|
||||||
@include transform-origin(center, bottom);
|
|
||||||
|
|
||||||
font-size: $tabs-md-tab-font-size;
|
|
||||||
|
|
||||||
text-transform: $tabs-md-tab-text-capitalization;
|
|
||||||
transition: $tabs-md-tab-text-transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md .tab-selected .tab-button-text {
|
|
||||||
transform: $tabs-md-tab-text-transform-active;
|
|
||||||
transition: $tabs-md-tab-text-transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md.layout-icon-top .has-icon .tab-button-text {
|
|
||||||
@include margin(null, null, -2px, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabbar-md.layout-icon-bottom .tab-button-text {
|
|
||||||
@include transform-origin(center, top);
|
|
||||||
|
|
||||||
@include margin(-2px, null, null, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Material Design Tab Button Icon
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.tabbar-md .tab-button-icon {
|
|
||||||
@include transform-origin(center, center);
|
|
||||||
|
|
||||||
width: $tabs-md-tab-icon-size;
|
|
||||||
height: $tabs-md-tab-icon-size;
|
|
||||||
|
|
||||||
font-size: $tabs-md-tab-icon-size;
|
|
||||||
|
|
||||||
transition: $tabs-md-tab-icon-transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab layout: icon-top, icon-only, title-only
|
|
||||||
.tabbar-md .tab-selected .tab-button-icon {
|
|
||||||
@include transform(translate3d($tabs-md-tab-icon-transform-x-active, $tabs-md-tab-icon-transform-y-active, $tabs-md-tab-icon-transform-z-active));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab layout: icon-end
|
|
||||||
.tabbar-md.layout-icon-end .tab-selected .tab-button-icon {
|
|
||||||
@include transform(translate3d($tabs-md-tab-icon-right-transform-x-active, $tabs-md-tab-icon-right-transform-y-active, $tabs-md-tab-icon-right-transform-z-active));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab layout: icon-bottom
|
|
||||||
.tabbar-md.layout-icon-bottom .tab-selected .tab-button-icon {
|
|
||||||
@include transform(translate3d($tabs-md-tab-icon-bottom-transform-x-active, $tabs-md-tab-icon-bottom-transform-y-active, $tabs-md-tab-icon-bottom-transform-z-active));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab layout: icon-start
|
|
||||||
.tabbar-md.layout-icon-start .tab-selected .tab-button-icon {
|
|
||||||
@include transform(translate3d($tabs-md-tab-icon-left-transform-x-active, $tabs-md-tab-icon-left-transform-y-active, $tabs-md-tab-icon-left-transform-z-active));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Material Design Tab with Icon or Title only
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.tabbar-md.layout-icon-hide ion-tab-button,
|
|
||||||
.tabbar-md.layout-title-hide ion-tab-button,
|
|
||||||
.tabbar-md ion-tab-button.icon-only,
|
|
||||||
.tabbar-md ion-tab-button.has-title-only {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Material Design Tabs Color Mixin
|
// Material Design Tabs Color Mixin
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
@ -147,8 +34,8 @@
|
|||||||
fill: $color-contrast;
|
fill: $color-contrast;
|
||||||
}
|
}
|
||||||
|
|
||||||
.enable-hover .tabbar-md-#{$color-name} ion-tab-button:hover,
|
.enable-hover .tabbar-md-#{$color-name} .tab-button:hover,
|
||||||
.tabbar-md-#{$color-name} ion-tab-button.tab-selected {
|
.tabbar-md-#{$color-name} .tab-button.tab-selected {
|
||||||
color: $color-contrast;
|
color: $color-contrast;
|
||||||
|
|
||||||
fill: $color-contrast;
|
fill: $color-contrast;
|
||||||
|
|||||||
@ -3,104 +3,8 @@
|
|||||||
// Material Design Tabs
|
// Material Design Tabs
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
/// @prop - Padding top on the tab button
|
/// @prop - Minimum height of the tabbar
|
||||||
$tabs-md-tab-padding-top: 8px !default;
|
$tabbar-md-height: 56px !default;
|
||||||
|
|
||||||
/// @prop - Padding end on the tab button
|
/// @prop - Border on the tabbar
|
||||||
$tabs-md-tab-padding-end: 12px !default;
|
$tabbar-md-border: 1px solid $tabbar-md-border-color !default;
|
||||||
|
|
||||||
/// @prop - Padding bottom on the tab button
|
|
||||||
$tabs-md-tab-padding-bottom: 10px !default;
|
|
||||||
|
|
||||||
/// @prop - Padding start on the tab button
|
|
||||||
$tabs-md-tab-padding-start: 12px, !default;
|
|
||||||
|
|
||||||
/// @prop - Minimum height of the tab button
|
|
||||||
$tabs-md-tab-height: 56px !default;
|
|
||||||
|
|
||||||
/// @prop - Font size of the inactive tab button text
|
|
||||||
$tabs-md-tab-font-size: 12px !default;
|
|
||||||
|
|
||||||
/// @prop - Font weight of the tab button text
|
|
||||||
$tabs-md-tab-font-weight: normal !default;
|
|
||||||
|
|
||||||
/// @prop - Text color of the inactive tab button
|
|
||||||
$tabs-md-tab-text-color: $tabbar-md-text-color !default;
|
|
||||||
|
|
||||||
/// @prop - Text color of the active tab button
|
|
||||||
$tabs-md-tab-text-color-active: $tabbar-md-text-color-active !default;
|
|
||||||
|
|
||||||
/// @prop - Icon color of the inactive tab button
|
|
||||||
$tabs-md-tab-icon-color: $tabbar-md-text-color !default;
|
|
||||||
|
|
||||||
/// @prop - Icon color of the active tab button
|
|
||||||
$tabs-md-tab-icon-color-active: $tabbar-md-text-color-active !default;
|
|
||||||
|
|
||||||
/// @prop - Font size of the active tab button text
|
|
||||||
$tabs-md-tab-font-size-active: 14px !default;
|
|
||||||
|
|
||||||
/// @prop - Margin top on the tab button text
|
|
||||||
$tabs-md-tab-text-margin-top: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Margin end on the tab button text
|
|
||||||
$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default;
|
|
||||||
|
|
||||||
/// @prop - Margin bottom on the tab button text
|
|
||||||
$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default;
|
|
||||||
|
|
||||||
/// @prop - Margin start on the tab button text
|
|
||||||
$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default;
|
|
||||||
|
|
||||||
/// @prop - Capitalization of the tab button text
|
|
||||||
$tabs-md-tab-text-capitalization: none !default;
|
|
||||||
|
|
||||||
/// @prop - Transform for the active tab button text
|
|
||||||
$tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default;
|
|
||||||
|
|
||||||
/// @prop - Text transition for the tab button text
|
|
||||||
$tabs-md-tab-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
|
|
||||||
$tabs-md-tab-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
|
|
||||||
$tabs-md-tab-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
|
|
||||||
$tabs-md-tab-icon-transform-z-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform x for the active tab button icon when the layout is icon-right
|
|
||||||
$tabs-md-tab-icon-right-transform-x-active: 2px !default;
|
|
||||||
|
|
||||||
/// @prop - Transform y for the active tab button icon when the layout is icon-right
|
|
||||||
$tabs-md-tab-icon-right-transform-y-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform z for the active tab button icon when the layout is icon-right
|
|
||||||
$tabs-md-tab-icon-right-transform-z-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
|
|
||||||
$tabs-md-tab-icon-bottom-transform-x-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
|
|
||||||
$tabs-md-tab-icon-bottom-transform-y-active: 2px !default;
|
|
||||||
|
|
||||||
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
|
|
||||||
$tabs-md-tab-icon-bottom-transform-z-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform x for the active tab button icon when the layout is icon-left
|
|
||||||
$tabs-md-tab-icon-left-transform-x-active: -2px !default;
|
|
||||||
|
|
||||||
/// @prop - Transform y for the active tab button icon when the layout is icon-left
|
|
||||||
$tabs-md-tab-icon-left-transform-y-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Transform z for the active tab button icon when the layout is icon-left
|
|
||||||
$tabs-md-tab-icon-left-transform-z-active: 0 !default;
|
|
||||||
|
|
||||||
/// @prop - Text transition for the tab button icon
|
|
||||||
$tabs-md-tab-icon-transition: transform .3s ease-in-out !default;
|
|
||||||
|
|
||||||
/// @prop - Size of the tab button icon
|
|
||||||
$tabs-md-tab-icon-size: 24px !default;
|
|
||||||
|
|
||||||
/// @prop - Opacity of the inactive tab button
|
|
||||||
$tabs-md-tab-opacity: .7 !default;
|
|
||||||
|
|||||||
@ -22,113 +22,6 @@ ion-tabbar.placement-top {
|
|||||||
order: -1;
|
order: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-tab-button {
|
|
||||||
@include margin(0);
|
|
||||||
@include text-align(center);
|
|
||||||
@include border-radius(0);
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
text-decoration: none;
|
|
||||||
background: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-disabled {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-disabled > * {
|
|
||||||
opacity: .4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button-text,
|
|
||||||
.tab-button-icon {
|
|
||||||
display: none;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
align-self: center;
|
|
||||||
|
|
||||||
min-width: 26px;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-icon .tab-button-icon,
|
|
||||||
.has-title .tab-button-text {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-title-only .tab-button-text {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-icon-start ion-tab-button {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-icon-end ion-tab-button {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-icon-bottom ion-tab-button {
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-icon-start ion-tab-button,
|
|
||||||
.layout-icon-end ion-tab-button,
|
|
||||||
.layout-icon-hide ion-tab-button,
|
|
||||||
.layout-title-hide ion-tab-button {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-hidden,
|
|
||||||
.layout-icon-hide .tab-button-icon,
|
|
||||||
.layout-title-hide .tab-button-text {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab Badges
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.tab-badge {
|
|
||||||
@include position(6%, 4%, null, null); // 4% fallback
|
|
||||||
@include position(null, calc(50% - 50px), null, null);
|
|
||||||
@include padding(1px, 6px);
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-icon .tab-badge {
|
|
||||||
@include position(null, calc(50% - 30px), null, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-icon-bottom .tab-badge,
|
|
||||||
.layout-icon-start .tab-badge,
|
|
||||||
.layout-icon-end .tab-badge {
|
|
||||||
@include position(null, calc(50% - 50px), null, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab Highlight
|
// Tab Highlight
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
@ -167,17 +60,19 @@ ion-tab-button {
|
|||||||
// Overflow Scrolling
|
// Overflow Scrolling
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
ion-tabbar.scrollable ion-scroll {
|
ion-tabbar.scrollable {
|
||||||
overflow: hidden;
|
ion-scroll {
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
ion-tabbar.scrollable .scroll-inner {
|
.scroll-inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-tabbar.scrollable ion-button.inactive {
|
ion-button.inactive {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -73,8 +73,8 @@ export class Tabbar {
|
|||||||
let next: {tab: HTMLIonTabButtonElement, amount: number};
|
let next: {tab: HTMLIonTabButtonElement, amount: number};
|
||||||
|
|
||||||
tabs.forEach((tab: HTMLIonTabButtonElement) => {
|
tabs.forEach((tab: HTMLIonTabButtonElement) => {
|
||||||
const left: number = tab.offsetLeft,
|
const left = tab.offsetLeft;
|
||||||
right: number = left + tab.offsetWidth;
|
const right = left + tab.offsetWidth;
|
||||||
|
|
||||||
if (left < scrollLeft) {
|
if (left < scrollLeft) {
|
||||||
previous = {tab, amount: left};
|
previous = {tab, amount: left};
|
||||||
@ -171,7 +171,8 @@ export class Tabbar {
|
|||||||
render() {
|
render() {
|
||||||
const selectedTab = this.selectedTab;
|
const selectedTab = this.selectedTab;
|
||||||
const ionTabbarHighlight = this.highlight ? <div class='animated tabbar-highlight'/> as HTMLElement : null;
|
const ionTabbarHighlight = this.highlight ? <div class='animated tabbar-highlight'/> as HTMLElement : null;
|
||||||
const tabButtons = this.tabs.map(tab => <ion-tab-button tab={tab} selected={selectedTab === tab}/>);
|
const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button');
|
||||||
|
const tabButtons = this.tabs.map(tab => <ion-tab-button class={buttonClasses} tab={tab} selected={selectedTab === tab}/>);
|
||||||
|
|
||||||
if (this.scrollable) {
|
if (this.scrollable) {
|
||||||
return [
|
return [
|
||||||
|
|||||||
Reference in New Issue
Block a user