feat(abc:avatar-list): add text, icon property in avatar-list-item. c…

…lose #93
ng-alain · Dec 11, 2017 · 0fac9e4 · 0fac9e4
1 parent 4e9d5ec
commit 0fac9e4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 77 deletions.
diff --git a/scaffold b/scaffold
diff --git a/src/app/abc/component.ts b/src/app/abc/component.ts
@@ -1,80 +1,16 @@
-import { Component, ElementRef } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-demo',
   template: `
-  <chart (render)="render($event)"></chart>
+  <avatar-list size="mini">
+      <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
+      <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
+      <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
+      <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
+      <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
+  </avatar-list>
   `
 })
 export class DemoComponent {
-    render(el: ElementRef) {
-        const { DataView } = DataSet;
-        let data = [
-          { action: '浏览网站', pv: 50000 },
-          { action: '放入购物车', pv: 35000 },
-          { action: '生成订单', pv: 25000 },
-          { action: '支付订单', pv: 15000 },
-          { action: '完成交易', pv: 8000 }
-        ];
-        const dv = new DataView().source(data);
-        dv.transform({
-          type: 'percent',
-          field: 'pv',
-          dimension: 'action',
-          as: 'percent'
-        });
-        data = dv.rows;
-        const chart = new G2.Chart({
-          container: el.nativeElement,
-          forceFit: true,
-          height: 400,
-          padding: [ 20, 120, 95 ]
-        });
-        chart.source(data, {
-          percent: {
-            nice: false
-          }
-        });
-        chart.axis(false);
-        chart.tooltip({
-          showTitle: false,
-          itemTpl: '<li data-index={index} style="margin-bottom:4px;">'
-              + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>'
-              + '{name}<br/>'
-              + '<span style="padding-left: 16px">浏览人数：{pv}</span><br/>'
-              + '<span style="padding-left: 16px">占比：{percent}</span><br/>'
-              + '</li>'
-        });
-        chart.coord('rect').transpose().scale(1, -1);
-        chart.intervalSymmetric().position('action*percent')
-          .shape('funnel')
-          .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
-          .tooltip('action*pv*percent', (action: any, pv: any, percent: any) => {
-            return {
-              name: action,
-              percent: (percent * 100).toFixed(2) + '%',
-              pv: pv
-            };
-          })
-        ;
-        data.map((obj: any) => {
-          // 中间标签文本
-          chart.guide().text({
-            top: true,
-            position: {
-              action: obj.action,
-              percent: 'median'
-            },
-            content: (obj.percent * 100).toFixed(2) + '%', // 显示的文本内容
-            style: {
-              fill: '#fff',
-              fontSize: '12',
-              textAlign: 'center',
-              shadowBlur: 2,
-              shadowColor: 'rgba(0, 0, 0, .45)'
-            }
-          });
-        });
-        chart.render();
-    }
 }
diff --git a/src/core/abc/components/avatar-list/avatar-list-item.component.ts b/src/core/abc/components/avatar-list/avatar-list-item.component.ts
@@ -6,5 +6,7 @@ import { Component, Input } from '@angular/core';
 })
 export class AvatarListItemComponent {
     @Input() src: string;
+    @Input() text: string;
+    @Input() icon: string;
     @Input() tips: string;
 }
diff --git a/src/core/abc/components/avatar-list/avatar-list.component.ts b/src/core/abc/components/avatar-list/avatar-list.component.ts
@@ -7,9 +7,9 @@ import { AvatarListItemComponent } from './avatar-list-item.component';
     <ul>
         <li *ngFor="let i of _items" class="item" [ngClass]="_size">
             <nz-tooltip *ngIf="i.tips" [nzTitle]="i.tips">
-                <nz-avatar nz-tooltip [nzSrc]="i.src" [nzSize]="_avatarSize"></nz-avatar>
+                <nz-avatar nz-tooltip [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="_avatarSize"></nz-avatar>
             </nz-tooltip>
-            <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzSize]="_avatarSize"></nz-avatar>
+            <nz-avatar *ngIf="!i.tips" [nzSrc]="i.src" [nzText]="i.text" [nzIcon]="i.icon" [nzSize]="_avatarSize"></nz-avatar>
         </li>
     </ul>
     `,

diff --git a/src/core/abc/components/avatar-list/demo/simple.md b/src/core/abc/components/avatar-list/demo/simple.md
@@ -11,15 +11,17 @@ Simplest of usage.
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'avatar-list-simple',
+  selector: 'app-demo',
   template: `
   <avatar-list size="mini">
       <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"></avatar-list-item>
       <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"></avatar-list-item>
       <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"></avatar-list-item>
+      <avatar-list-item tips="Cipchk" text="Cipchk"></avatar-list-item>
+      <avatar-list-item tips="heart-o" icon="heart-o"></avatar-list-item>
   </avatar-list>
   `
 })
-export class AvatarListSimpleComponent {
+export class DemoComponent {
 }
 ```
diff --git a/src/core/abc/components/avatar-list/index.md b/src/core/abc/components/avatar-list/index.md
@@ -20,4 +20,6 @@ size | 头像大小  | `large`、`small`、`mini`、`default` | `default`
 |----------|------------------------------------------|-------------|-------|
 | tips     | 头像展示文案                                 | `string`  | - |
 | src     | 头像图片连接                                 | `string`  | - |
+| text     | 文本类头像                                 | `string`  | - |
+| icon     | 图标类型                                 | `string`  | - |