feat(tabbar): add activeIcon property (#139)

cipchk · May 11, 2019 · a1c2d05 · a1c2d05
1 parent ba9ccd7
commit a1c2d05
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 32 deletions.
diff --git a/components/tab/index.md b/components/tab/index.md
@@ -12,6 +12,7 @@ module: TabModule
 heading | 选项卡名称 | `string` | -
 disabled | 是否禁用 | `boolean` | -
 icon | icon图标，支持HTML | `string` | -
+activeIcon | 激活时icon图标，支持HTML | `string` | -
 badge | 徽章内容，支持数字或圆点 | `number,'dot'` | -
 active | 是否激活 | `boolean` | -
 select | 当tab激活时触发 | `EventEmitter<TabDirective>` | -

diff --git a/components/tab/tab.directive.ts b/components/tab/tab.directive.ts
@@ -5,17 +5,20 @@ import {
   Output,
   EventEmitter,
   OnDestroy,
+  OnChanges,
 } from '@angular/core';
 import { BarComponent } from './bar.component';
 
 @Directive({ selector: 'weui-tab, [weui-tab]' })
-export class TabDirective implements OnDestroy {
+export class TabDirective implements OnDestroy, OnChanges {
   /** 选项卡名称 */
   @Input() heading: string;
   /** 是否禁用 */
   @Input() disabled: boolean;
   /** icon图标，支持HTML */
   @Input() icon: string;
+  /** 激活时icon图标，支持HTML */
+  @Input() activeIcon: string;
   /** 徽章内容，支持数字或圆点 */
   @Input() badge: number | 'dot';
 
@@ -56,6 +59,12 @@ export class TabDirective implements OnDestroy {
     this._tabComp.add(this);
   }
 
+  ngOnChanges(): void {
+    if (!this.activeIcon) {
+      this.activeIcon = this.icon;
+    }
+  }
+
   ngOnDestroy(): void {
     this._tabComp.remove(this);
   }

diff --git a/components/tab/tabbar.component.ts b/components/tab/tabbar.component.ts
@@ -12,7 +12,7 @@ import { BarComponent } from './bar.component';
     <div class="weui-tabbar__item" [ngClass]="{'weui-bar__item_on': item.active}"
       *ngFor="let item of tabs" (click)="setActive(item)">
       <div style="display: inline-block;position: relative;">
-        <div class="weui-tabbar__icon" [innerHTML]="item.icon"></div>
+        <div class="weui-tabbar__icon" [innerHTML]="item.active ? item.activeIcon : item.icon"></div>
         <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;" *ngIf="item.badge && item.badge !== 'dot'">{{item.badge}}</span>
         <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;" *ngIf="item.badge && item.badge === 'dot'"></span>
       </div>

diff --git a/src/app/example/tabbar/tabbar.component.html b/src/app/example/tabbar/tabbar.component.html
@@ -1,32 +1,37 @@
 <weui-tabbar>
-    <weui-tab heading="微信" [badge]="8" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
-        <weui-infiniteloader (loadmore)="onLoadMore($event)">
-            <article class="weui-article">
-                <h1>微信</h1>
-                <div class="weui-cells__title">List with 50 Max</div>
-                <div class="weui-cells">
-                    <a *ngFor="let i of items" class="weui-cell weui-cell_access" href="javascript:;">
-                        <div class="weui-cell__bd">{{i}}</div>
-                        <div class="weui-cell__ft"></div>
-                    </a>
-                </div>
-            </article>
-        </weui-infiniteloader>
-    </weui-tab>
-    <weui-tab heading="通讯录" [icon]="'<img src=./assets/images/icon_tabbar.png>'" (select)="onSelect()">
-        <article class="weui-article">
-            <h1>通讯录</h1>
-            <p>Select Time: {{time}}</p>
-        </article>
-    </weui-tab>
-    <weui-tab heading="发现" [badge]="'dot'" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
-        <article class="weui-article">
-            <h1>发现</h1>
-        </article>
-    </weui-tab>
-    <weui-tab heading="我" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
-        <article class="weui-article">
-            <h1>我</h1>
-        </article>
-    </weui-tab>
+  <weui-tab heading="微信" [badge]="8" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
+    <weui-infiniteloader (loadmore)="onLoadMore($event)">
+      <article class="weui-article">
+        <h1>微信</h1>
+        <div class="weui-cells__title">List with 50 Max</div>
+        <div class="weui-cells">
+          <a *ngFor="let i of items" class="weui-cell weui-cell_access" href="javascript:;">
+            <div class="weui-cell__bd">{{ i }}</div>
+            <div class="weui-cell__ft"></div>
+          </a>
+        </div>
+      </article>
+    </weui-infiniteloader>
+  </weui-tab>
+  <weui-tab
+    heading="通讯录"
+    [icon]="'<img src=./assets/images/icon_tabbar.png>'"
+    [activeIcon]="'<img src=./assets/images/momentloader.png>'"
+    (select)="onSelect()"
+  >
+    <article class="weui-article">
+      <h1>通讯录</h1>
+      <p>Select Time: {{ time }}</p>
+    </article>
+  </weui-tab>
+  <weui-tab heading="发现" [badge]="'dot'" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
+    <article class="weui-article">
+      <h1>发现</h1>
+    </article>
+  </weui-tab>
+  <weui-tab heading="我" [icon]="'<img src=./assets/images/icon_tabbar.png>'">
+    <article class="weui-article">
+      <h1>我</h1>
+    </article>
+  </weui-tab>
 </weui-tabbar>