Skip to content

Commit

Permalink
feat(module: tabs&tabbar): tabs&tabbar refactor (#399)
Browse files Browse the repository at this point in the history
  • Loading branch information
fisherspy committed Apr 29, 2019
1 parent 80bd1b5 commit f82ceab
Show file tree
Hide file tree
Showing 37 changed files with 866 additions and 826 deletions.
132 changes: 58 additions & 74 deletions components/tab-bar/demo/basic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,107 +10,89 @@ import { Component } from '@angular/core';
[activeTab]="selectedIndex"
[hidden]="hidden"
[tabBarPosition]="topFlag ? 'top' : 'bottom'"
(onPress)="tabBarTabOnPress($event)"
>
<TabPane style="background-color: white; text-align: center; height: 100%" [title]='custom1'>
<ng-template #custom1>
<TabBarTab [title]="'Life'"
[key]="1"
[badge]="1"
[icon]="icon1"
(onPress)="onPress($event)"
[selectedIcon]="icon11"
>
<ng-template #icon1>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon11>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
</TabBarTab>
<TabBarItem [title]="'Life'"
[key]="1"
[badge]="1"
[icon]="icon1"
[selectedIcon]="icon11">
<ng-template #icon1>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon11>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<div style="background-color: white; height: 100%; text-align: center">
<div style="padding-top: 60px">Clicked Life tab, show Life information</div>
<ng-container>
<ng-template [ngTemplateOutlet]="content"></ng-template>
</ng-container>
</div>
</TabPane>
<TabPane style="background-color: white; text-align: center; height: 100%" [title]='custom2'>
<ng-template #custom2>
<TabBarTab [title]="'Koubei'"
[key]="2"
[badge]="'new'"
[icon]="icon2"
[selectedIcon]="icon22"
>
<ng-template #icon2>
<div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon22>
<div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
</TabBarTab>
</TabBarItem>
<TabBarItem [title]="'Koubei'"
[key]="2"
[badge]="'new'"
[icon]="icon2"
[selectedIcon]="icon22"
>
<ng-template #icon2>
<div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon22>
<div style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<div style="background-color: white; height: 100%; text-align: center">
<div style="padding-top: 60px">Clicked Koubei tab, show Koubei information</div>
<ng-container>
<ng-template [ngTemplateOutlet]="content"></ng-template>
</ng-container>
</div>
</TabPane>
<TabPane style="background-color: white; text-align: center; height: 100%" [title]='custom3'>
<ng-template #custom3>
<TabBarTab [title]="'Friend'"
[key]="3"
[dot]="true"
[icon]="icon3"
[selectedIcon]="icon33">
<ng-template #icon3>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon33>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
</TabBarTab>
</TabBarItem>
<TabBarItem [title]="'Friend'"
[key]="3"
[dot]="true"
[icon]="icon3"
[selectedIcon]="icon33">
<ng-template #icon3>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon33>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<div style="background-color: white; height: 100%; text-align: center">
<div style="padding-top: 60px">Clicked Friend tab, show Friend information</div>
<ng-container>
<ng-template [ngTemplateOutlet]="content"></ng-template>
</ng-container>
</div>
</TabPane>
<TabPane style="background-color: white; text-align: center; height: 100%" [title]='custom4'>
<ng-template #custom4>
<TabBarTab [title]="'My'"
[key]="4"
[icon]="icon4"
[selectedIcon]="icon44">
<ng-template #icon4>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon44>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
</TabBarTab>
</TabBarItem>
<TabBarItem [title]="'My'"
[key]="4"
[icon]="icon4"
[selectedIcon]="icon44">
<ng-template #icon4>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<ng-template #icon44>
<div style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg') center center / 21px 21px no-repeat;">
</div>
</ng-template>
<div style="background-color: white; height: 100%; text-align: center">
<div style="padding-top: 60px">Clicked My tab, show My information</div>
<ng-container>
<ng-template [ngTemplateOutlet]="content"></ng-template>
</ng-container>
</div>
</TabPane>
</TabBarItem>
</TabBar>
<ng-template #content>
<a style="display: block; margin-top: 40px; margin-bottom: 20px; color: #108ee9"
(click)="showNextTabBar($event)">
Expand All @@ -124,7 +106,7 @@ import { Component } from '@angular/core';
(click)="changePosition($event)">
Click to change tab-bar position top/bottom
</a>
<a style="display: block; margin-bottom: 600px; color: #108ee9"
<a style="display: block; margin-bottom: 60px; color: #108ee9"
(click)="showFullScreen($event)">
Click to switch fullscreen
</a>
Expand Down Expand Up @@ -153,6 +135,7 @@ export class DemoTabBarBasicComponent {
} else {
this.selectedIndex++;
}
console.log('selectedIndex: ', this.selectedIndex);
}

showFullScreen(event) {
Expand All @@ -173,7 +156,8 @@ export class DemoTabBarBasicComponent {
this.topFlag = !this.topFlag;
}

onPress(event) {
console.log('event: ', event);
tabBarTabOnPress(pressParam: any) {
console.log('onPress Params: ', pressParam);
this.selectedIndex = pressParam.index;
}
}
6 changes: 4 additions & 2 deletions components/tab-bar/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,16 @@ Properties | Descrition | Type | Default
| unselectedTintColor | unselected's font color | String | '#888' |
| hidden | whether it is hidden | Boolean | false |
| tabBarPosition | tabbar position | 'top'\|'bottom' | 'bottom' |
| prerenderingSiblingsNumber| pre-render nearby sibling, -1: render all the siblings, 0: render current page | number | 1 |
| onPress | on press the bar | (index: number, title: string, key: string) => void | false |

### TabBar.Item
### TabBarItem

Properties | Descrition | Type | Default
-----------|------------|------|--------
| badge | badge number | Number \ String ||
| dot | show red dot on right-top(invalid when set badge number) | Boolean | false |
| onPress | on press the bar | (title: string, key: string) => void | false |

| icon | the default icon | ref demo | <span> </span> |
| selectedIcon | the icon of selected | ref demo | <span> </span> |
| title | title | String | <span> </span> |
Expand Down
5 changes: 3 additions & 2 deletions components/tab-bar/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ subtitle: 标签栏
| unselectedTintColor | 未选中的字体颜色 | String | '#888' |
| hidden | 是否隐藏 | Boolean | false |
| tabBarPosition | tabbar 位置 | 'top'\|'bottom' | 'bottom' |
| prerenderingSiblingsNumber| 预加载相邻的tab内容, -1: 加载所有的tab内容, 0: 仅加载当前tab内容 | number | 1 |
| onPress | bar 点击触发 | (index: number, title: string, key: string) => void | false |

### TabBar.Item
### TabBarItem

属性 | 说明 | 类型 | 默认值
----|-----|------|------
| badge | 徽标数 | Number \ String ||
| dot | 是否在右上角显示小红点(在设置badge的情况下失效) | Boolean | false |
| onPress | bar 点击触发 | (title: string, key: string) => void | false |
| icon | 默认展示图片 | 见 demo | <span> </span> |
| selectedIcon | 选中后的展示图片 | 见 demo | <span> </span> |
| title | 标题文字 | String | <span> </span> |
Expand Down
2 changes: 1 addition & 1 deletion components/tab-bar/public-api.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export * from './tab-bar.module';
export * from './tab-bar.component';
export * from './tab-bar-tab.component';
export * from './tab-bar-item.component';
32 changes: 32 additions & 0 deletions components/tab-bar/tab-bar-item.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<ng-template #content>
<ng-content></ng-content>
</ng-template>

<ng-template #tabBarTab>
<div class="{{prefixCls}}-icon"
[style.color]="selected ? tintColor : unselectedTintColor">
<Badge *ngIf="badge" className="{{prefixCls}}-badge tab-badge" [text]="badge">
<ng-container *ngIf="isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate">
</ng-container>
</Badge>
<Badge className="{{prefixCls}}-badge tab-badge" [dot]="dot" *ngIf="dot">
<ng-container *ngIf="isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate">
</ng-container>
</Badge>
<ng-container *ngIf="!badge && !dot" >
<ng-container *ngIf="isTemplateRef(selected ? selectedIcon : icon); then domTemplate; else imgTemplate">
</ng-container>
</ng-container>
</div>
<p class="{{prefixCls}}-title" [style.color]="selected ? tintColor : unselectedTintColor">
{{title}}
</p>
</ng-template>

<ng-template #domTemplate>
<ng-template [ngTemplateOutlet]="(selected ? selectedIcon : icon)"></ng-template>
</ng-template>

<ng-template #imgTemplate >
<img src="{{selected ? selectedIcon : icon}}" alt="{{title}}">
</ng-template>
42 changes: 42 additions & 0 deletions components/tab-bar/tab-bar-item.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import {
Component,
Input,
ViewChild,
TemplateRef
} from '@angular/core';
import { TabPane } from '../tabs/tab-pane.component';

@Component({
selector: 'TabBarItem, nzm-tab-bar-item',
templateUrl: './tab-bar-item.component.html'
})
export class TabBarItem extends TabPane {
prefixCls: string = 'am-tab-bar-tab';
selected: boolean = false;
tintColor: string = '#108ee9';
unselectedTintColor: string = '#888';

@ViewChild('tabBarTab')
tabBarTab: TemplateRef<void>;

@Input()
key: string = '';
@Input()
title: string = '';
@Input()
dot: boolean = false;
@Input()
badge: number | string = null;
@Input()
icon: string | TemplateRef<void> = null;
@Input()
selectedIcon: string | TemplateRef<void> = null;

constructor() {
super();
}

isTemplateRef(value) {
return value instanceof TemplateRef;
}
}
24 changes: 0 additions & 24 deletions components/tab-bar/tab-bar-tab.component.html

This file was deleted.

61 changes: 0 additions & 61 deletions components/tab-bar/tab-bar-tab.component.ts

This file was deleted.

0 comments on commit f82ceab

Please sign in to comment.