mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
46
core/src/components/tab-button/readme.md
Normal file
46
core/src/components/tab-button/readme.md
Normal file
@ -0,0 +1,46 @@
|
||||
# ion-tab-button
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
|
||||
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
|
||||
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionTabButtonDidLoad
|
||||
|
||||
|
||||
#### ionTabButtonDidUnload
|
||||
|
||||
|
||||
#### ionTabbarClick
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
74
core/src/components/tab-button/tab-button.ios.scss
Normal file
74
core/src/components/tab-button/tab-button.ios.scss
Normal file
@ -0,0 +1,74 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.ios.vars";
|
||||
|
||||
.tab-button-ios {
|
||||
max-width: $tab-button-ios-max-width;
|
||||
|
||||
font-size: $tab-button-ios-font-size;
|
||||
color: $tab-button-ios-text-color;
|
||||
|
||||
fill: $tab-button-ios-icon-color;
|
||||
}
|
||||
|
||||
.tab-button-ios.focused {
|
||||
background: $tabbar-ios-background-color-focused;
|
||||
}
|
||||
|
||||
.tab-button-ios .tab-cover {
|
||||
@include padding(
|
||||
$tab-button-ios-padding-top,
|
||||
$tab-button-ios-padding-end,
|
||||
$tab-button-ios-padding-bottom,
|
||||
$tab-button-ios-padding-start);
|
||||
}
|
||||
|
||||
.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, null, null);
|
||||
|
||||
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);
|
||||
}
|
||||
37
core/src/components/tab-button/tab-button.ios.vars.scss
Normal file
37
core/src/components/tab-button/tab-button.ios.vars.scss
Normal file
@ -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;
|
||||
130
core/src/components/tab-button/tab-button.md.scss
Normal file
130
core/src/components/tab-button/tab-button.md.scss
Normal file
@ -0,0 +1,130 @@
|
||||
@import "./tab-button";
|
||||
@import "./tab-button.md.vars";
|
||||
|
||||
// Material Design Tab Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.tab-button-md {
|
||||
max-width: 168px;
|
||||
|
||||
font-weight: $tab-button-md-font-weight;
|
||||
color: $tab-button-md-text-color;
|
||||
|
||||
fill: $tab-button-md-icon-color;
|
||||
}
|
||||
|
||||
.tab-button-md.focused {
|
||||
background: $tabbar-md-background-color-focused;
|
||||
}
|
||||
|
||||
.tab-button-md .tab-cover {
|
||||
@include padding(
|
||||
$tab-button-md-padding-top,
|
||||
$tab-button-md-padding-end,
|
||||
$tab-button-md-padding-bottom,
|
||||
$tab-button-md-padding-start);
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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
core/src/components/tab-button/tab-button.md.vars.scss
Normal file
103
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;
|
||||
137
core/src/components/tab-button/tab-button.scss
Normal file
137
core/src/components/tab-button/tab-button.scss
Normal file
@ -0,0 +1,137 @@
|
||||
@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: block;
|
||||
overflow: hidden;
|
||||
|
||||
flex: 1;
|
||||
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ion-tab-button a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tab-cover {
|
||||
@include margin(0);
|
||||
@include padding(0);
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-btn-disabled {
|
||||
pointer-events: none;
|
||||
|
||||
> .tab-cover {
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
94
core/src/components/tab-button/tab-button.tsx
Normal file
94
core/src/components/tab-button/tab-button.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import {Component, Element, Event, EventEmitter, Listen, Prop, State} from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-button',
|
||||
styleUrls: {
|
||||
ios: 'tab-button.ios.scss',
|
||||
md: 'tab-button.md.scss'
|
||||
}
|
||||
})
|
||||
export class TabButton {
|
||||
|
||||
@Element() el: HTMLElement;
|
||||
|
||||
mode: string;
|
||||
|
||||
@State() keyFocus = false;
|
||||
|
||||
@Prop() selected = false;
|
||||
@Prop() tab: HTMLIonTabElement;
|
||||
|
||||
@Event() ionTabbarClick: EventEmitter<HTMLIonTabElement>;
|
||||
@Event() ionTabButtonDidLoad: EventEmitter<void>;
|
||||
@Event() ionTabButtonDidUnload: EventEmitter<void>;
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionTabButtonDidLoad.emit();
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionTabButtonDidUnload.emit();
|
||||
}
|
||||
|
||||
@Listen('click')
|
||||
protected onClick(ev: UIEvent) {
|
||||
if (!this.tab.disabled) {
|
||||
this.ionTabbarClick.emit(this.tab);
|
||||
}
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
private onKeyUp() {
|
||||
this.keyFocus = true;
|
||||
}
|
||||
|
||||
private onBlur() {
|
||||
this.keyFocus = false;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const selected = this.selected;
|
||||
const tab = this.tab;
|
||||
const hasTitle = !!tab.title;
|
||||
const hasIcon = !!tab.icon;
|
||||
const hasTitleOnly = (hasTitle && !hasIcon);
|
||||
const hasIconOnly = (hasIcon && !hasTitle);
|
||||
const hasBadge = !!tab.badge;
|
||||
return {
|
||||
'role': 'tab',
|
||||
'id': tab.btnId,
|
||||
'aria-selected': selected,
|
||||
'hidden': !tab.show,
|
||||
class: {
|
||||
'tab-selected': selected,
|
||||
'has-title': hasTitle,
|
||||
'has-icon': hasIcon,
|
||||
'has-title-only': hasTitleOnly,
|
||||
'has-icon-only': hasIconOnly,
|
||||
'has-badge': hasBadge,
|
||||
'tab-btn-disabled': tab.disabled,
|
||||
'focused': this.keyFocus
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const tab = this.tab;
|
||||
const href = tab.href || '#';
|
||||
|
||||
return [
|
||||
<a
|
||||
href={href}
|
||||
class='tab-cover'
|
||||
onKeyUp={this.onKeyUp.bind(this)}
|
||||
onBlur={this.onBlur.bind(this)}>
|
||||
{ tab.icon && <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> }
|
||||
{ this.mode === 'md' && <ion-ripple-effect/> }
|
||||
</a>
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user