+ {{title}} +
+- {{title}} -
- -
+
content3
-
-
+
+
+
+
+
+ Clicked Koubei tab， show Koubei information
+
+
+
+
content4
-
+
+
+
+
+ Clicked Friend tab， show Friend information
+
+
+
+
+
+
+
+
+ Clicked My tab， show My information
+ Third Tab
@@ -55,24 +51,18 @@ import { Component } from '@angular/core';
(onChange)="onChange($event)"
(onTabClick)="onTabClick($event)"
>
-
+
+
-
-
Content of first tab
+
+
-
-
Content of second tab
+
+
@@ -88,7 +78,7 @@ import { Component } from '@angular/core';
})
export class DemoTabsBasicComponent {
flag = true;
- index = 0;
+ index = 1;
onChange(item) {
console.log('onChange', item);
diff --git a/components/tabs/demo/dynamic.md b/components/tabs/demo/dynamic.md
new file mode 100644
index 00000000..6580b7b8
--- /dev/null
+++ b/components/tabs/demo/dynamic.md
@@ -0,0 +1,13 @@
+---
+order: 4
+title:
+ zh-CN: 动态创建
+ en-US: 'Dynamic TabPane'
+---
+## zh-CN
+
+TabPane被动态创建
+
+## en-US
+
+TabPanes are created dynamicly
\ No newline at end of file
diff --git a/components/tabs/demo/dynamic.ts b/components/tabs/demo/dynamic.ts
new file mode 100644
index 00000000..6a1fe860
--- /dev/null
+++ b/components/tabs/demo/dynamic.ts
@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-tabs-dynamic',
+ template: `
+
+
+
+
+ `,
+ styles: [
+ `
+ /deep/ .am-badge {
+ text-align: right;
+ }
+ `
+ ]
+})
+export class DemoTabsDynamicComponent {
+ flag = true;
+ activeTabIndex = 0;
+
+ tabList: any[] = [{
+ title: '1st Tab',
+ content: '1st Tab Content'
+ }, {
+ title: '2nd Tab',
+ content: '2nd Tab Content'
+ }, {
+ title: '3rd Tab',
+ content: '3rd Tab Content'
+ }];
+
+ onChange(item) {
+ console.log('onChange', item);
+ }
+
+ onTabClick(item) {
+ console.log('onTabClick', item);
+ }
+
+ selectCard(e) {
+ console.log(' ', JSON.stringify(e));
+ }
+
+ changeIndex() {
+ this.activeTabIndex = 0;
+ }
+
+ onClick() {
+ this.tabList.push({
+ title: '' + (this.tabList.length + 1) + 'th Tab',
+ content: '' + (this.tabList.length + 1) + 'th Tab Content'
+ });
+ }
+}
diff --git a/components/tabs/demo/fixedheight.ts b/components/tabs/demo/fixedheight.ts
index cb5b8d63..c6fc1cca 100644
--- a/components/tabs/demo/fixedheight.ts
+++ b/components/tabs/demo/fixedheight.ts
@@ -9,24 +9,18 @@ import { Component } from '@angular/core';
(onChange)="onChange($event)"
(onTabClick)="onTabClick($event)"
>
-
-
Content of third tab
+
+ {{tabListItem.content}}
+ Add Pane +
+
+
+
-
-
Content of first tab
+
+
-
-
Content of second tab
+
+
diff --git a/components/tabs/demo/fixedtabtitlesize.md b/components/tabs/demo/fixedtabtitlesize.md
new file mode 100755
index 00000000..10946347
--- /dev/null
+++ b/components/tabs/demo/fixedtabtitlesize.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+ zh-CN: TabTitle固定尺寸
+ en-US: fixed TabTitle Size
+---
+
+## zh-CN
+
+为TabTitle设置尺寸(单位：px)。
+
+## en-US
+
+Set TabTitle Size(unit: px).
\ No newline at end of file
diff --git a/components/tabs/demo/fixedtabtitlesize.ts b/components/tabs/demo/fixedtabtitlesize.ts
new file mode 100755
index 00000000..9406142c
--- /dev/null
+++ b/components/tabs/demo/fixedtabtitlesize.ts
@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'demo-tabs-fixedtabtitlesize',
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ styles: [
+ `
+ /deep/ .am-badge {
+ text-align: right;
+ }
+ `
+ ]
+})
+export class DemoTabsFixedtabtitlesizeComponent {
+ flag = true;
+ index = 1;
+
+ onChange(item) {
+ console.log('onChange', item);
+ }
+
+ onTabClick(item) {
+ console.log('onTabClick', item);
+ }
+
+ selectCard(e) {
+ console.log(' ', JSON.stringify(e));
+ }
+
+ changeIndex() {
+ this.index = 0;
+ }
+}
diff --git a/components/tabs/demo/multitabs.ts b/components/tabs/demo/multitabs.ts
index b31ff60e..92f32f1c 100644
--- a/components/tabs/demo/multitabs.ts
+++ b/components/tabs/demo/multitabs.ts
@@ -3,55 +3,58 @@ import { Component } from '@angular/core';
@Component({
selector: 'demo-tabs-multitabs',
template: `
-
-
-
-
- Content of 2 tab
-
-
- Content of 3 tab
-
-
- Content of 4 tab
-
-
- Content of 5 tab
-
-
- Content of 6 tab
-
-
- Content of 7 tab
-
-
- Content of 8 tab
-
-
- Content of 9 tab
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
styles: [
`
diff --git a/components/tabs/demo/noanim.md b/components/tabs/demo/noanim.md
index bce5a024..eae21efc 100644
--- a/components/tabs/demo/noanim.md
+++ b/components/tabs/demo/noanim.md
@@ -2,7 +2,7 @@
order: 2
title:
zh-CN: 无动画
- en-US: 'No animation'
+ en-US: 'No Animation'
---
## zh-CN
diff --git a/components/tabs/demo/noanim.ts b/components/tabs/demo/noanim.ts
index 6843d947..93fb0560 100644
--- a/components/tabs/demo/noanim.ts
+++ b/components/tabs/demo/noanim.ts
@@ -10,24 +10,18 @@ import { Component } from '@angular/core';
(onChange)="onChange($event)"
(onTabClick)="onTabClick($event)"
>
-
-
Content of third tab
First Tab
+
+ Content of first tab
+
+ Second Tab
+
+ Content of second tab
+
+
+ Content of first tab
+
+
+ Content of second tab
+
+
+ Content of third tab
+
+ Content of 1 tab
-
+ Content of 1st tab
+
+
+ Content of 2nd tab
+
+
+ Content of 3rd tab
+
+
+ Content of 4th tab
+
+
+ Content of 5th tab
+
+
+ Content of 6th tab
+
+
+ Content of 7th tab
+
+
+ Content of 8th tab
+
+
+ Content of 9th tab
+
+
+
+
-
-
-
+
Content of 3 tab
-
+
Content of 4 tab
-
+
Content of 5 tab
-
+
Content of 6 tab
-
+
Content of 7 tab
diff --git a/components/tabs/tabs.component.ts b/components/tabs/tabs.component.ts
index 03fe9d5c..0651eb69 100644
--- a/components/tabs/tabs.component.ts
+++ b/components/tabs/tabs.component.ts
@@ -25,7 +25,7 @@ export class Tabs implements DoCheck, AfterContentInit {
prefixCls: string = 'am-tabs';
selectedKey: number = 0;
keyToSelect: number = 0;
- paneMoveStyle: string = '';
+ paneMoveStyle: string = 'translate3d(0, 0, 0)';
private _startTime: number = 0;
private _startPosition: number = 0;
@@ -58,6 +58,8 @@ export class Tabs implements DoCheck, AfterContentInit {
@Input()
distanceToChangeTab: number = 0.3;
@Input()
+ tabTitleSize: number = 0;
+ @Input()
tabBarActiveTextColor: string = '';
@Input()
tabBarInactiveTextColor: string = '';
@@ -66,10 +68,12 @@ export class Tabs implements DoCheck, AfterContentInit {
@Input()
tabBarBackgroundColor: string = '#FFF';
@Input()
+ prerenderingSiblingsNumber: number = 1;
+ @Input()
tabBarTextStyle: object = {};
/** should be removed when https://github.com/angular/angular/issues/20810 resolved **/
@Input()
- tabPanesComponent: QueryList = null;
+ tabPanesContent: QueryList = null;
@Input()
get activeTab(): number {
return this.selectedKey;
@@ -161,7 +165,7 @@ export class Tabs implements DoCheck, AfterContentInit {
}
getCurrentTabPanes(): QueryList {
- return this.tabPanesComponent || this.tabPanes;
+ return this.tabPanesContent || this.tabPanes;
}
onTouchStart(event) {
@@ -193,7 +197,7 @@ export class Tabs implements DoCheck, AfterContentInit {
this.swipeable &&
this.animated
) {
- this.paneMoveStyle = 'translate3d(' + distance + 'px, 0, 0 )';
+ this.paneMoveStyle = 'translate3d(calc(-' + this.selectedKey * 100 + '% + ' + distance + 'px), 0, 0 )';
}
} else if ('vertical' === this._tabDirection) {
const distance = event.changedTouches[0].clientY - this._startPosition;
@@ -208,7 +212,7 @@ export class Tabs implements DoCheck, AfterContentInit {
this.swipeable &&
this.animated
) {
- this.paneMoveStyle = 'translate3d(0, ' + distance + 'px, 0 )';
+ this.paneMoveStyle = 'translate3d(0, calc(-' + this.selectedKey * 100 + '% + ' + distance + 'px, 0 )';
}
}
}
@@ -231,7 +235,7 @@ export class Tabs implements DoCheck, AfterContentInit {
this.keyToSelect--;
}
}
- this.paneMoveStyle = 'translate3d(0, 0, 0 )';
+ this.paneMoveStyle = 'translate3d(-' + this.selectedKey * 100 + '%, 0, 0 )';
} else if ('vertical' === this._tabDirection) {
const distance = event.changedTouches[0].clientY - this._startPosition;
const distanceToChangeTabPx = this.tabContent.nativeElement.offsetHeight * this.distanceToChangeTab;
@@ -247,7 +251,7 @@ export class Tabs implements DoCheck, AfterContentInit {
this.keyToSelect--;
}
}
- this.paneMoveStyle = 'translate3d(0, 0, 0 )';
+ this.paneMoveStyle = 'translate3d(0, -' + this.selectedKey * 100 + '%, 0 )';
}
}
}
@@ -266,65 +270,14 @@ export class Tabs implements DoCheck, AfterContentInit {
}
private selectTabPane(index: number) {
- const keyToSelect = Math.min(this.getCurrentTabPanes().length - 1, Math.max(index || 0, 0));
- this.getCurrentTabPanes().forEach((tabPane: TabPane, indexKey: number) => {
- if (keyToSelect < indexKey) {
- if (this.animated) {
- if ('horizontal' === this._tabDirection) {
- if (keyToSelect === indexKey - 1) {
- tabPane.position = 'right-with-animation-with-higher-zindex';
- } else {
- tabPane.position = 'right-with-animation';
- }
- } else if ('vertical' === this._tabDirection) {
- if (keyToSelect === indexKey - 1) {
- tabPane.position = 'bottom-with-animation-with-higher-zindex';
- } else {
- tabPane.position = 'bottom-with-animation';
- }
- }
- } else {
- if ('horizontal' === this._tabDirection) {
- tabPane.position = 'right-without-animation';
- } else if ('vertical' === this._tabDirection) {
- tabPane.position = 'bottom-without-animation';
- }
- }
- } else if (keyToSelect > indexKey) {
- if (this.animated) {
- if ('horizontal' === this._tabDirection) {
- if (keyToSelect === indexKey + 1) {
- tabPane.position = 'left-with-animation-with-higher-zindex';
- } else {
- tabPane.position = 'left-with-animation';
- }
- } else if ('vertical' === this._tabDirection) {
- if (keyToSelect === indexKey + 1) {
- tabPane.position = 'top-with-animation-with-higher-zindex';
- } else {
- tabPane.position = 'top-with-animation';
- }
- }
- } else {
- if ('horizontal' === this._tabDirection) {
- tabPane.position = 'left-without-animation';
- } else if ('vertical' === this._tabDirection) {
- tabPane.position = 'top-without-animation';
- }
- }
- } else {
- if (this.animated) {
- tabPane.position = 'center-with-animation';
- } else {
- tabPane.position = 'center-without-animation';
- }
- }
- if (keyToSelect !== indexKey) {
- tabPane.active = false;
- } else {
- tabPane.active = true;
+ if (this.getCurrentTabPanes() && this.getCurrentTabPanes().length > 0) {
+ const actualKeyToSelect = Math.min(this.getCurrentTabPanes().length - 1, Math.max(index || 0, 0));
+ if ('horizontal' === this._tabDirection) {
+ this.paneMoveStyle = 'translate3d(-' + actualKeyToSelect * 100 + '%, 0, 0 )';
+ } else if ('vertical' === this._tabDirection) {
+ this.paneMoveStyle = 'translate3d(0, -' + actualKeyToSelect * 100 + '%, 0 )';
}
- });
+ }
}
private getVelocity(deltaDistance, deltaTime) {
diff --git a/components/tabs/tabs.module.ts b/components/tabs/tabs.module.ts
index d1b015d9..ddfa19c3 100644
--- a/components/tabs/tabs.module.ts
+++ b/components/tabs/tabs.module.ts
@@ -3,14 +3,15 @@ import { CommonModule } from '@angular/common';
import { ObserversModule } from '@angular/cdk/observers';
import { Tabs } from './tabs.component';
import { TabPane } from './tab-pane.component';
-import { DefaultTabBarComponent } from './default-tab-bar.component';
+import { TabPaneBody } from './tab-pane-body.component';
+import { DefaultTabBar } from './default-tab-bar.component';
export { TabPane } from './tab-pane.component';
@NgModule({
imports: [CommonModule, ObserversModule],
- declarations: [TabPane, Tabs, DefaultTabBarComponent],
- exports: [TabPane, Tabs, DefaultTabBarComponent],
+ declarations: [TabPane, Tabs, TabPaneBody, DefaultTabBar],
+ exports: [TabPane, Tabs, TabPaneBody, DefaultTabBar],
providers: []
})
-export class TabsModule {}
+export class TabsModule { }
Content of first tab
+
+
-
-
diff --git a/components/tabs/tabs.component.spec.ts b/components/tabs/tabs.component.spec.ts
index d5bfd649..266a4ba0 100644
--- a/components/tabs/tabs.component.spec.ts
+++ b/components/tabs/tabs.component.spec.ts
@@ -251,102 +251,34 @@ describe('tab', () => {
});
it('selectTabPane function work', () => {
- component.tabDirection = 'horizontal';
- fixture.detectChanges();
- component.tabs.selectTabPane(2);
- fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 3) {
- expect(item.position).toEqual('right-with-animation');
- } else if (i === 3) {
- expect(item.position).toEqual('right-with-animation-with-higher-zindex');
- } else if (i === 1) {
- expect(item.position).toEqual('left-with-animation-with-higher-zindex');
- } else if (i < 1) {
- expect(item.position).toEqual('left-with-animation');
- } else {
- expect(item.position).toEqual('center-with-animation');
- }
- });
-
component.animated = false;
component.tabDirection = 'horizontal';
fixture.detectChanges();
component.tabs.selectTabPane(2);
fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 2) {
- expect(item.position).toEqual('right-without-animation');
- } else if (i < 2) {
- expect(item.position).toEqual('left-without-animation');
- } else {
- expect(item.position).toEqual('center-without-animation');
- }
- });
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').style.transform).toContain('translate3d(-200%, 0px, 0px)');
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').classList).not.toContain('am-tabs-content-wrap-animated');
component.animated = true;
- component.tabDirection = 'vertical';
- fixture.detectChanges();
- component.tabs.selectTabPane(2);
fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 3) {
- expect(item.position).toEqual('bottom-with-animation');
- } else if (i === 3) {
- expect(item.position).toEqual('bottom-with-animation-with-higher-zindex');
- } else if (i === 1) {
- expect(item.position).toEqual('top-with-animation-with-higher-zindex');
- } else if (i < 1) {
- expect(item.position).toEqual('top-with-animation');
- } else {
- expect(item.position).toEqual('center-with-animation');
- }
- });
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').classList).toContain('am-tabs-content-wrap-animated');
+
component.animated = false;
component.tabDirection = 'vertical';
fixture.detectChanges();
component.tabs.selectTabPane(2);
fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 2) {
- expect(item.position).toEqual('bottom-without-animation');
- } else if (i < 2) {
- expect(item.position).toEqual('top-without-animation');
- } else {
- expect(item.position).toEqual('center-without-animation');
- }
- component.animated = false;
- });
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').style.transform).toContain('translate3d(0px, -200%, 0px)');
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').classList).not.toContain('am-tabs-content-wrap-animated');
- component.tabDirection = 'test';
- fixture.detectChanges();
- component.tabs.selectTabPane(2);
- fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 2) {
- expect(item.position).toEqual('bottom-without-animation');
- } else if (i < 2) {
- expect(item.position).toEqual('top-without-animation');
- } else {
- expect(item.position).toEqual('center-without-animation');
- }
- component.animated = true;
- });
-
- component.tabDirection = 'test';
+ component.animated = true;
+ component.tabDirection = 'vertical';
fixture.detectChanges();
component.tabs.selectTabPane(2);
fixture.detectChanges();
- component.tabPanes.map((item, i) => {
- if (i > 2) {
- expect(item.position).toEqual('bottom-without-animation');
- } else if (i < 2) {
- expect(item.position).toEqual('top-without-animation');
- } else {
- expect(item.position).toEqual('center-with-animation');
- }
- });
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').style.transform).toContain('translate3d(0px, -200%, 0px)');
+ expect(tabsEle.querySelector('.am-tabs-content-wrap').classList).toContain('am-tabs-content-wrap-animated');
});
it('onTabClick work', () => {
@@ -479,12 +411,10 @@ describe('tab', () => {
[tabBarUnderlineStyle]="{'border': '1px red solid'}"
[tabBarTextStyle]="{'font-size': '33px'}"
[tabBarActiveTextColor]="'red'">
-
+
-
+
@@ -492,19 +422,19 @@ describe('tab', () => {
Content of first tab
Content of second tab
+
+
diff --git a/components/tabs/demo/vertical.ts b/components/tabs/demo/vertical.ts
index 54eec81b..739f25dc 100644
--- a/components/tabs/demo/vertical.ts
+++ b/components/tabs/demo/vertical.ts
@@ -3,36 +3,30 @@ import { Component } from '@angular/core';
@Component({
selector: 'demo-tabs-vertical',
template: `
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
`,
styles: [
`
diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md
index 6016267b..df7257d6 100644
--- a/components/tabs/doc/index.en-US.md
+++ b/components/tabs/doc/index.en-US.md
@@ -28,6 +28,7 @@ animated | Whether to change tabs with animation | boolean | true | false
onChange | Callback when tab is switched | (index: number) => void | | false
onTabClick | on tab click | (index: number) => void | | false
distanceToChangeTab | distance to change tab, width ratio | number | 0.3 | false
+| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page | number | 1 |
tabDirection | tab paging direction | 'horizontal' \| 'vertical' | horizontal | false
tabBarUnderlineStyle | style of the default tab bar's underline | object | | false
tabBarBackgroundColor | color of the default tab bar's background | string | | false
diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md
index 86dd6ce3..d3c6a370 100644
--- a/components/tabs/doc/index.zh-CN.md
+++ b/components/tabs/doc/index.zh-CN.md
@@ -28,6 +28,7 @@ animated | 是否开启切换动画 | boolean | true | false
onChange | tab变化时触发 | (index: number) => void | | false
onTabClick | tab 被点击的回调 | (index: number) => void | | false
distanceToChangeTab | 滑动切换阈值(宽度比例) | number | 0.3 | false
+| prerenderingSiblingsNumber| 预加载相邻的tab内容, -1: 加载所有的tab内容, 0: 仅加载当前tab内容 | number | 1 |
tabDirection | Tab方向 | 'horizontal' \| 'vertical' | horizontal | false
tabBarUnderlineStyle | tabBar下划线样式 | object | | false
tabBarBackgroundColor | tabBar背景色 | string | | false
diff --git a/components/tabs/public-api.ts b/components/tabs/public-api.ts
index 3df8f93a..38fb60c7 100644
--- a/components/tabs/public-api.ts
+++ b/components/tabs/public-api.ts
@@ -1,4 +1,5 @@
export * from './tabs.module';
export * from './tabs.component';
export * from './tab-pane.component';
+export * from './tab-pane-body.component';
export * from './default-tab-bar.component';
diff --git a/components/tabs/style/addon.less b/components/tabs/style/addon.less
index ec958dad..31014fe7 100644
--- a/components/tabs/style/addon.less
+++ b/components/tabs/style/addon.less
@@ -6,22 +6,53 @@
.@{tabs-prefix-cls} {
&-pane-wrap {
- position: absolute;
- top: 0;
- left: 0;
- }
- &-pane-wrap:first-child {
- position: relative;
+ touch-action: pan-x pan-y;
}
}
-.@{tabs-default-bar-prefix-cls}-top,
-.@{tabs-default-bar-prefix-cls}-bottom {
- .@{tabs-default-bar-prefix-cls}-underline {
- left: 0;
+.@{tabs-default-bar-prefix-cls} {
+ &-top,
+ &-bottom {
+ &-underline {
+ left: 0;
+ }
+ }
+
+ &-top {
+ border-bottom: 1px solid rgba(217, 217, 217, 0.5);
+ .@{tabs-default-bar-prefix-cls} {
+ &-tab::after {
+ height: 0 !important;
+ }
+ }
+ }
+ &-bottom {
+ border-top: 1px solid rgba(217, 217, 217, 0.5);
+ .@{tabs-default-bar-prefix-cls} {
+ &-tab::before {
+ height: 0 !important;
+ }
+ }
+ }
+ &-left {
+ border-right: 1px solid rgba(217, 217, 217, 0.5);
+ .@{tabs-default-bar-prefix-cls} {
+ &-tab::after {
+ width: 0 !important;
+ }
+ }
+ }
+ &-right {
+ border-left: 1px solid rgba(217, 217, 217, 0.5);
+ .@{tabs-default-bar-prefix-cls} {
+ &-tab::before {
+ width: 0 !important;
+ }
+ }
}
}
+
.@{tabs-default-bar-prefix-cls}-left,
.@{tabs-default-bar-prefix-cls}-right {
.@{tabs-default-bar-prefix-cls}-underline {
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index 2babed46..6306a6f5 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -39,6 +39,7 @@
flex: 1;
width: 100%;
height: 100%;
+ min-height: 0;
&-animated {
transition: transform @effect-duration @easing-in-out, left @effect-duration @easing-in-out, top @effect-duration @easing-in-out;
diff --git a/components/tabs/tab-pane-body.component.html b/components/tabs/tab-pane-body.component.html
new file mode 100644
index 00000000..c9cf5dee
--- /dev/null
+++ b/components/tabs/tab-pane-body.component.html
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/components/tabs/tab-pane-body.component.ts b/components/tabs/tab-pane-body.component.ts
new file mode 100644
index 00000000..b47b8597
--- /dev/null
+++ b/components/tabs/tab-pane-body.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit, Input, HostBinding, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+ selector: '[tab-pane-body]',
+ templateUrl: './tab-pane-body.component.html',
+ encapsulation: ViewEncapsulation.None
+})
+export class TabPaneBody implements OnInit {
+
+ @Input() active: boolean = false;
+ @Input() hidden: boolean = false;
+ @Input() content: TemplateRef;
+
+ @HostBinding('class.am-tabs-pane-wrap')
+ paneWrap: boolean = true;
+ @HostBinding('class.am-tabs-pane-wrap-active')
+ get wrapActive(): boolean {
+ return this.active;
+ }
+ @HostBinding('class.am-tabs-pane-wrap-inactive')
+ get wrapInactive(): boolean {
+ return !this.active;
+ }
+
+ constructor() { }
+
+ ngOnInit() { }
+
+}
diff --git a/components/tabs/tab-pane.component.html b/components/tabs/tab-pane.component.html
index f16322a0..b06f3d0f 100644
--- a/components/tabs/tab-pane.component.html
+++ b/components/tabs/tab-pane.component.html
@@ -1 +1,3 @@
-
+
\ No newline at end of file
diff --git a/components/tabs/tab-pane.component.ts b/components/tabs/tab-pane.component.ts
index d5ca50b6..2ea64bdf 100644
--- a/components/tabs/tab-pane.component.ts
+++ b/components/tabs/tab-pane.component.ts
@@ -1,120 +1,17 @@
-import { Component, Input, HostBinding, TemplateRef } from '@angular/core';
-import { trigger, state, style } from '@angular/animations';
-
-export type TabPanelPositionState =
- | 'center-with-animation'
- | 'center-without-animation'
- | 'top-with-animation'
- | 'top-with-animation-with-higher-zindex'
- | 'top-without-animation'
- | 'left-with-animation'
- | 'left-with-animation-with-higher-zindex'
- | 'left-without-animation'
- | 'bottom-with-animation'
- | 'bottom-with-animation-with-higher-zindex'
- | 'bottom-without-animation'
- | 'right-with-animation'
- | 'right-with-animation-with-higher-zindex'
- | 'right-without-animation';
+import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'TabPane, nzm-tab-pane',
- templateUrl: './tab-pane.component.html',
- styles: [`:host {touch-action: auto}`],
- host: {
- '[@translateTabPane]': 'position',
- '(@translateTabPane.start)': 'onTranslateTabStarted($event)',
- '(@translateTabPane.done)': 'onTranslateTabComplete($event)'
- },
- animations: [
- trigger('translateTabPane', [
- state(
- 'left-with-animation',
- style({
- transform: 'translate3d(-100%, 0, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state(
- 'left-with-animation-with-higher-zindex',
- style({
- 'z-index': 100,
- transform: 'translate3d(-100%, 0, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state('left-without-animation', style({transform: 'translate3d(-100%, 0, 0)' })),
- state(
- 'right-with-animation',
- style({
- transform: 'translate3d(100%, 0, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state(
- 'right-with-animation-with-higher-zindex',
- style({
- 'z-index': 100,
- transform: 'translate3d(100%, 0, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state('right-without-animation', style({transform: 'translate3d(100%, 0, 0)' })),
- state(
- 'top-with-animation',
- style({
- transform: 'translate3d(0, -100%, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state(
- 'top-with-animation-with-higher-zindex',
- style({
- 'z-index': 100,
- transform: 'translate3d(0, -100%, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state('top-without-animation', style({ transform: 'translate3d(0, -100%, 0)' })),
- state(
- 'bottom-with-animation',
- style({
- transform: 'translate3d(0, 100%, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state(
- 'bottom-with-animation-with-higher-zindex',
- style({
- 'z-index': 100,
- transform: 'translate3d(0, 100%, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state('bottom-without-animation', style({ transform: 'translate3d(0, 100%, 0)' })),
- state(
- 'center-with-animation',
- style({
- 'z-index': 100,
- transform: 'translate3d(0, 0, 0)',
- transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
- })
- ),
- state('center-without-animation', style({ transform: 'translate3d(0, 0, 0)' }))
- ])
- ]
+ templateUrl: './tab-pane.component.html'
})
export class TabPane {
- prefixCls: string = 'am-tabs-pane';
- tintColor: string = '#108ee9';
- unselectedTintColor: string = '#888';
- active: boolean = true;
- isTitleString: boolean = true;
- showTabPanelContent: boolean = false;
- position: TabPanelPositionState;
+
+ public isTitleString: boolean = true;
private _title: string | TemplateRef;
+ @ViewChild('content') content: TemplateRef;
+
@Input()
get title(): string | TemplateRef {
return this._title;
@@ -124,54 +21,6 @@ export class TabPane {
this._title = value;
}
- @HostBinding('class.am-tabs-pane-wrap')
- paneWrap: boolean = true;
- @HostBinding('class.am-tabs-pane-wrap-active')
- get wrapActive(): boolean {
- return this.active;
- }
- @HostBinding('class.am-tabs-pane-wrap-inactive')
- get wrapInactive(): boolean {
- return !this.active;
- }
-
constructor() {}
- onTranslateTabStarted(e: any) {
- if (
- (e.toState == 'center-with-animation' ||
- e.toState == 'center-without-animation' ||
- e.toState == 'left-with-animation-with-higher-zindex' ||
- e.toState == 'right-with-animation-with-higher-zindex' ||
- e.toState == 'top-with-animation-with-higher-zindex' ||
- e.toState == 'bottom-with-animation-with-higher-zindex') &&
- (this.position == 'center-with-animation' ||
- this.position == 'center-without-animation' ||
- this.position == 'left-with-animation-with-higher-zindex' ||
- this.position == 'right-with-animation-with-higher-zindex' ||
- this.position == 'top-with-animation-with-higher-zindex' ||
- this.position == 'bottom-with-animation-with-higher-zindex')
- ) {
- this.showTabPanelContent = true;
- }
- }
-
- onTranslateTabComplete(e: any) {
- if (
- e.toState !== 'center-with-animation' &&
- e.toState !== 'center-without-animation' &&
- e.toState !== 'left-with-animation-with-higher-zindex' &&
- e.toState !== 'right-with-animation-with-higher-zindex' &&
- e.toState !== 'top-with-animation-with-higher-zindex' &&
- e.toState !== 'bottom-with-animation-with-higher-zindex' &&
- this.position !== 'center-with-animation' &&
- this.position !== 'center-without-animation' &&
- this.position !== 'left-with-animation-with-higher-zindex' &&
- this.position !== 'right-with-animation-with-higher-zindex' &&
- this.position !== 'top-with-animation-with-higher-zindex' &&
- this.position !== 'bottom-with-animation-with-higher-zindex'
- ) {
- this.showTabPanelContent = false;
- }
- }
}
diff --git a/components/tabs/tabs.component.html b/components/tabs/tabs.component.html
index 8a9cb873..a20e8666 100644
--- a/components/tabs/tabs.component.html
+++ b/components/tabs/tabs.component.html
@@ -10,7 +10,12 @@
(touchmove)="onTouchMove($event)"
(touchend)="onTouchEnd($event)"
>
-
Content of third tab
- Content of first tab
-
-
- Content of second tab
-
-
- Content of third tab
-
-
+ Content of first tab
+
+
+ Content of second tab
+
+
+ Content of third tab
+
+ Content of 1 tab
Tab 2