feat(module: tabs&tabbar): tabs&tabbar refactor

components/action-sheet/style/index.less

@@ -37,14 +37,15 @@
 
     &-item {
       font-size: @actionsheet-item-font-size;
-      padding: 0;
+      padding: 0 8 * @hd;
       margin: 0;
       position: relative;
       height: @actionsheet-item-height;
       line-height: @actionsheet-item-height;
       box-sizing: border-box;
       white-space: nowrap;
       text-overflow: ellipsis;
+      overflow-x: hidden;
       .hairline('top');
       &&-active {
         background-color: @fill-tap;

components/tab-bar/demo/basic.ts

@@ -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)">
@@ -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>
@@ -153,6 +135,7 @@ export class DemoTabBarBasicComponent {
     } else {
       this.selectedIndex++;
     }
+    console.log('selectedIndex: ', this.selectedIndex);
   }
 
   showFullScreen(event) {
@@ -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;
   }
 }

components/tab-bar/doc/index.en-US.md

@@ -23,14 +23,15 @@ Properties | Descrition | Type | Default
 | unselectedTintColor       | unselected's font color  | String | '#888'           |
 | hidden       | whether it is hidden  | Boolean | false           |
 | tabBarPosition | tabbar position | 'top'\|'bottom' | 'bottom' |
+| 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> |

components/tab-bar/doc/index.zh-CN.md

@@ -24,14 +24,14 @@ subtitle: 标签栏
 | unselectedTintColor       | 未选中的字体颜色  | String | '#888'           |
 | hidden      | 是否隐藏  | Boolean | false           |
 | tabBarPosition | tabbar 位置 | 'top'\|'bottom' | 'bottom' |
+| 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>   |

components/tab-bar/public-api.ts

@@ -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';

components/tab-bar/tab-bar-item.component.html

@@ -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>

components/tab-bar/tab-bar-item.component.ts

@@ -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;
+  }
+}