mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
refactor(tabbar): removes ion-tab-button
This commit is contained in:
Manu Mtz.-Almeida
@ -1,26 +0,0 @@
|
||||
# ion-tab-button
|
||||
|
||||
TabButton is an internal component for tabs. Please see the [Tab docs](../tab) for more details.
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ------------ | ------------- | -------------------------------------------------------------- | --------- |
|
||||
| `badgeColor` | `badge-color` | | `string` |
|
||||
| `badge` | `badge` | | `string` |
|
||||
| `color` | `color` | | `Color` |
|
||||
| `disabled` | `disabled` | | `boolean` |
|
||||
| `href` | `href` | | `string` |
|
||||
| `icon` | `icon` | | `string` |
|
||||
| `label` | `label` | | `string` |
|
||||
| `mode` | `mode` | | `Mode` |
|
||||
| `selected` | `selected` | If true, the tab button will be selected. Defaults to `false`. | `boolean` |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,41 +0,0 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.ios.vars";
|
||||
|
||||
:host {
|
||||
--color: #{$tab-button-ios-text-color};
|
||||
--color-selected: #{$tabbar-ios-text-color-active};
|
||||
--background-focused: #{$tabbar-ios-background-color-focused};
|
||||
|
||||
max-width: $tab-button-ios-max-width;
|
||||
|
||||
font-size: $tab-button-ios-font-size;
|
||||
}
|
||||
|
||||
.tab-button-native {
|
||||
@include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start);
|
||||
}
|
||||
|
||||
.tab-button-text {
|
||||
@include margin(0, null, 1px, null);
|
||||
|
||||
min-height: $tab-button-ios-font-size + 1;
|
||||
}
|
||||
|
||||
:host(.has-label-only) .tab-button-text {
|
||||
@include margin(2px, 0);
|
||||
|
||||
font-size: $tab-button-ios-font-size + 2;
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.tab-button-icon {
|
||||
@include margin(4px, null, null, null);
|
||||
|
||||
font-size: $tab-button-ios-icon-size;
|
||||
}
|
||||
|
||||
.tab-button-icon::before {
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
@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;
|
||||
@ -1,61 +0,0 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.md.vars";
|
||||
|
||||
// Material Design Tab Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
--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;
|
||||
|
||||
font-weight: $tab-button-md-font-weight;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Material Design Tab Button Text
|
||||
// --------------------------------------------------
|
||||
|
||||
.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);
|
||||
|
||||
transform: var(--label-transform);
|
||||
|
||||
transition: $tab-button-md-text-transition;
|
||||
|
||||
font-size: $tab-button-md-font-size;
|
||||
|
||||
text-transform: $tab-button-md-text-capitalization;
|
||||
}
|
||||
|
||||
:host(.tab-selected) .tab-button-text {
|
||||
--label-transform: #{$tab-button-md-text-transform-active};
|
||||
|
||||
transition: $tab-button-md-text-transition;
|
||||
}
|
||||
|
||||
// Material Design Tab Button Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
.tab-button-icon {
|
||||
@include transform-origin(center, center);
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
@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 .1s ease-in-out !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 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 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 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 .1s ease-in-out !default;
|
||||
|
||||
/// @prop - Size of the tab button icon
|
||||
$tab-button-md-icon-size: 22px !default;
|
||||
|
||||
/// @prop - Opacity of the inactive tab button
|
||||
$tab-button-md-opacity: .7 !default;
|
||||
@ -1,157 +0,0 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
:host {
|
||||
@include border-radius(0);
|
||||
@include margin(0);
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host(.focused) {
|
||||
background: var(--background-focused);
|
||||
}
|
||||
|
||||
:host(:hover),
|
||||
:host(.tab-selected) {
|
||||
color: var(--color-selected);
|
||||
}
|
||||
|
||||
:host(.tab-hidden) {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tab-button-native {
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: var(--flex-direction, column);
|
||||
align-items: center;
|
||||
justify-content: var(--justify-content, flex-start);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
:host(.tab-button-disabled) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(.tab-button-disabled) .tab-button-native {
|
||||
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 {
|
||||
align-self: center;
|
||||
|
||||
min-width: 26px;
|
||||
max-width: 100%;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
: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
|
||||
// --------------------------------------------------
|
||||
|
||||
.tab-badge {
|
||||
@include position(6%, 4%, null, null); // 4% fallback
|
||||
@include position(null, var(--badge-end, calc(50% - 30px)), null, null);
|
||||
@include padding(1px, 6px);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
position: absolute;
|
||||
|
||||
height: auto;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
:host(.has-label-only) .tab-badge {
|
||||
--badge-end: #{calc(50% - 50px)};
|
||||
}
|
||||
|
||||
:host(.has-icon-only) .tab-badge {
|
||||
--badge-end: #{calc(50% - 30px)};
|
||||
}
|
||||
|
||||
:host(.tab-selected) .tab-button-icon {
|
||||
transform: var(--icon-transform-selected);
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import { Component, Element, Prop, State } from '@stencil/core';
|
||||
|
||||
import { Color, Mode } from '../../interface';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-button',
|
||||
styleUrls: {
|
||||
ios: 'tab-button.ios.scss',
|
||||
md: 'tab-button.md.scss'
|
||||
},
|
||||
shadow: true
|
||||
})
|
||||
export class TabButton {
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@Prop() mode!: Mode;
|
||||
@Prop() color?: Color;
|
||||
|
||||
@State() keyFocus = false;
|
||||
|
||||
/**
|
||||
* If true, the tab button will be selected. Defaults to `false`.
|
||||
*/
|
||||
@Prop() selected = false;
|
||||
@Prop() label?: string;
|
||||
@Prop() icon?: string;
|
||||
@Prop() badge?: string;
|
||||
@Prop() disabled?: boolean;
|
||||
@Prop() badgeColor?: string;
|
||||
@Prop() href?: string;
|
||||
|
||||
private onKeyUp() {
|
||||
this.keyFocus = true;
|
||||
}
|
||||
|
||||
private onBlur() {
|
||||
this.keyFocus = false;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const selected = this.selected;
|
||||
const hasLabel = !!this.label;
|
||||
const hasIcon = !!this.icon;
|
||||
const hasLabelOnly = (hasLabel && !hasIcon);
|
||||
const hasIconOnly = (hasIcon && !hasLabel);
|
||||
const hasBadge = !!this.badge;
|
||||
return {
|
||||
'role': 'tab',
|
||||
'aria-selected': selected ? 'true' : null,
|
||||
class: {
|
||||
...createColorClasses(this.color),
|
||||
'tab-selected': selected,
|
||||
'has-label': hasLabel,
|
||||
'has-icon': hasIcon,
|
||||
'has-label-only': hasLabelOnly,
|
||||
'has-icon-only': hasIconOnly,
|
||||
'has-badge': hasBadge,
|
||||
'tab-button-disabled': this.disabled,
|
||||
'focused': this.keyFocus
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { icon, label, href, badge, badgeColor, mode } = this;
|
||||
|
||||
return [
|
||||
<a
|
||||
href={href || '#'}
|
||||
class="tab-button-native"
|
||||
onKeyUp={this.onKeyUp.bind(this)}
|
||||
onBlur={this.onBlur.bind(this)}>
|
||||
{ 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}></ion-ripple-effect> }
|
||||
</a>
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user