8000 feat(label): support label icon #245262 · atinc/ngx-tethys@40fe367 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 40fe367

Browse files
author
zhangwei
committed
feat(label): support label icon #245262
feat(label): support label icon
1 parent 005ea80 commit 40fe367

File tree

16 files changed

+268
-258
lines changed

16 files changed

+268
-258
lines changed

‎demo/src/app/components/+label/label-section.component.html

Lines changed: 93 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,111 @@
11
<section>
2-
<div class="header">
3-
<h2>常规标签</h2>
4-
<p>· 标记与分类当前任务。 </p>
5-
</div>
6-
<div class="body">
7-
<span class="mr-1" thyLabel="default">Default</span>
8-
<span class="mr-1" thyLabel="primary">Primary</span>
9-
<span class="mr-1" thyLabel="success">Success</span>
10-
<span class="mr-1" thyLabel="info">Info</span>
11-
<span class="mr-1" thyLabel="warning">Warning</span>
12-
<br />
13-
<br />
14-
<span class="mr-1" thyLabel="emboss-default">emboss-default</span>
15-
<span class="mr-1" thyLabel="emboss-primary">emboss-primary</span>
16-
<span class="mr-1" thyLabel="emboss-warning">emboss-warning</span>
17-
<span class="mr-1" thyLabel="emboss-danger">emboss-danger</span>
18-
<hr> 自定义颜色
19-
<code>#7076fa</code>覆盖
20-
<span class="mr-1" thyLabel [thyLabelColor]="color">Danger</span>
21-
<span class="mr-1" thyLabel="emboss-default" [thyLabelColor]="''">emboss-primary</span>
22-
<span class="mr-1" thyLabel="emboss-default" [thyLabelColor]="color">emboss-primary</span>
23-
<hr />
24-
<span class="mr-1" thyLabel="default" thyHasHover="true" thyBeforeIcon="wtf-th-plus" (click)="add()">添加标签</span>
25-
<span class="mr-1" thyLabel="primary" thyHasHover="true" thyAfterIcon="wtf-times" (thyOnRemove)="remove()">
26-
重要不紧急
27-
</span>
28-
<span class="mr-1" thyLabel="default" thyHasHover="true" (click)="showMore()">…</span>
29-
<br>
30-
<br>
31-
<span thyLabel="default" thyAfterIcon="wtf-times" (thyOnRemove)="remove()">default</span>
32-
</div>
2+
<div class="header">
3+
<h2>常规标签</h2>
4+
<p>· 标记与分类当前任务。</p>
5+
</div>
6+
<div class="body">
7+
<span class="mr-1" thyLabel="default">Default</span>
8+
<span class="mr-1" thyLabel="primary">Primary</span>
9+
<span class="mr-1" thyLabel="success">Success</span>
10+
<span class="mr-1" thyLabel="info">Info</span>
11+
<span class="mr-1" thyLabel="warning">Warning</span>
12+
<br />
13+
<br />
14+
<span class="mr-1" thyLabel="emboss-default">emboss-default</span>
15+
<span class="mr-1" thyLabel="emboss-primary">emboss-primary</span>
16+
<span class="mr-1" thyLabel="emboss-warning">emboss-warning</span>
17+
<span class="mr-1" thyLabel="emboss-danger">emboss-danger</span>
18+
<hr />
19+
自定义颜色 <code>#7076fa</code>覆盖
20+
<span class="mr-1" thyLabel [thyLabelColor]="color">Danger</span>
21+
<span class="mr-1" thyLabel="emboss-default" [thyLabelColor]="''">emboss-primary</span>
22+
<span class="mr-1" thyLabel="emboss-default" [thyLabelColor]="color">emboss-primary</span>
23+
<hr />
24+
<span class="mr-1" thyLabel="default" thyHasHover="true" thyBeforeIcon="plus" (click)="add()">添加标签</span>
25+
<span class="mr-1" thyLabel="primary" thyHasHover="true" thyAfterIcon="close" (thyOnRemove)="remove()">
26+
重要不紧急
27+
</span>
28+
<span class="mr-1" thyLabel="default" thyHasHover="true" (click)="showMore()">…</span>
29+
<br />
30+
<br />
31+
<span thyLabel="default" thyAfterIcon="close" (thyOnRemove)="remove()">default</span>
32+
</div>
3333
</section>
3434

3535
<section>
36-
<div class="header">
37-
<h2>大小</h2>
38-
</div>
39-
<div class="body">
40-
<span class="mr-1" thyLabel="default" thySize="sm">标签 sm 20</span>
41-
<span class="mr-1" thyLabel="default">标签 default 22</span>
42-
<span class="mr-1" thyLabel="default" thySize="md">标签 md 24</span>
43-
<span class="mr-1" thyLabel="default" thySize="lg">标签 lg 26</span>
44-
</div>
36+
<div class="header">
37+
<h2>大小</h2>
38+
</div>
39+
<div class="body">
40+
<span class="mr-1" thyLabel="default" thySize="sm">标签 sm 20</span>
41+
<span class="mr-1" thyLabel="default">标签 default 22</span>
42+
<span class="mr-1" thyLabel="default" thySize="md">标签 md 24</span>
43+
<span class="mr-1" thyLabel="default" thySize="lg">标签 lg 26</span>
44+
</div>
4545
</section>
4646

4747
<section>
48-
<div class="header">
49-
<h2>状态标签</h2>
50-
<p>· 显示“审批”、“考核”、“公告”、“投票”等操作的当前状态</p>
51-
</div>
52-
<div class="body">
53-
<span class="mr-1" thyLabel="warning" thyLabelType="state">未开始</span>
54-
<span class="mr-1" thyLabel="primary" thyLabelType="state">进行中</span>
55-
<span class="mr-1" thyLabel="danger" thyLabelType="state">已结束</span>
56-
<span class="mr-1" thyLabel="default" thyLabelType="state">已作废</span>
57-
<span class="mr-1" thyLabel="default" thyLabelType="state">已撤销</span>
58-
</div>
48+
<div class="header">
49+
<h2>状态标签</h2>
50+
<p>· 显示“审批”、“考核”、“公告”、“投票”等操作的当前状态</p>
51+
</div>
52+
<div class="body">
53+
<span class="mr-1" thyLabel="warning" thyLabelType="state">未开始</span>
54+
<span class="mr-1" thyLabel="primary" thyLabelType="state">进行中</span>
55+
<span class="mr-1" thyLabel="danger" thyLabelType="state">已结束</span>
56+
<span class="mr-1" thyLabel="default" thyLabelType="state">已作废</span>
57+
<span class="mr-1" thyLabel="default" thyLabelType="state">已撤销</span>
58+
</div>
5959
</section>
6060

6161
<section>
62-
<div class="header">
63-
<h2>状态标签2</h2>
64-
<p>· 多用于“销售_客户详情_沟通状态”展示，状态颜色由管理员自定义</p>
65-
</div>
66-
<div class="body">
67-
<span class="mr-1" thyLabel="default" thyLabelType="pill">
68-
<span class="thy-dot thy-dot-label" thyLabel [thyLabelColor]="color"></span>
69-
初步沟通
70-
</span>
71-
<span class="mr-1" thyLabel="default" thyLabelType="pill">
72-
<span class="thy-dot thy-dot-label" thyLabel [thyLabelColor]="color1"></span>
73-
确定意向
74-
</span>
75-
<span thyLabel="default" thyLabelType="pill">
76-
<span class="thy-dot thy-dot-label" thyLabel="primary"></span>
77-
签约成交
78-
</span>
79-
</div>
62+
<div class="header">
63+
<h2>状态标签2</h2>
64+
<p>· 多用于“销售_客户详情_沟通状态”展示，状态颜色由管理员自定义</p>
65+
</div>
66+
<div class="body">
67+
<span class="mr-1" thyLabel="default" thyLabelType="pill">
68+
<span class="thy-dot thy-dot-label" thyLabel [thyLabelColor]="color"></span>
69+
初步沟通
70+
</span>
71+
<span class="mr-1" thyLabel="default" thyLabelType="pill">
72+
<span class="thy-dot thy-dot-label" thyLabel [thyLabelColor]="color1"></span>
73+
确定意向
74+
</span>
75+
<span thyLabel="default" thyLabelType="pill">
76+
<span class="thy-dot thy-dot-label" thyLabel="primary"></span>
77+
签约成交
78+
</span>
79+
</div>
8080
</section>
8181

8282
<section>
83-
<div class="header">
84-
<h2>状态标签-任务</h2>
85-
<p>·任务状态的展示，通用在看板、表格、列表等</p>
86-
</div>
87-
<div class="body">
88-
<span *ngFor="let status of statusLabels" class="mr-3" [thyBeforeIcon]="status.icon" thyLabel="emboss-status"
89-
[thyLabelColor]="status.color">{{status.name}}</span>
90-
</div>
83+
<div class="header">
84+
<h2>状态标签-任务</h2>
85+
<p>·任务状态的展示，通用在看板、表格、列表等</p>
86+
</div>
87+
<div class="body">
88+
<span
89+
*ngFor="let status of statusLabels"
90+
class="mr-3"
91+
[thyBeforeIcon]="status.icon"
92+
thyLabel="emboss-status"
93+
[thyLabelColor]="status.color"
94+
>{{ status.name }}</span
95+
>
96+
</div>
9197
</section>
9298

9399
<section>
94-
<div class="header">
95-
<h2>固定标签</h2>
96-
<p>·用于描述任务间的关联关系，不可修改文案及颜色</p>
97-
</div>
98-
<div class="body">
99-
<span *ngFor="let status of relationLabels" class="mr-3" thyLabel="outline" [thyLabelColor]="status.color">{{status.name}}</span>
100-
</div>
100+
<div class="header">
101+
<h2>固定标签</h2>
102+
<p>·用于描述任务间的关联关系，不可修改文案及颜色</p>
103+
</div>
104+
<div class="body">
105+
<span *ngFor="let status of relationLabels" class="mr-3" thyLabel="outline" [thyLabelColor]="status.color">{{
106+
status.name
107+
}}</span>
108+
</div>
101109
</section>
102110

103-
<api-parameters [parameters]="apiParameters"></api-parameters>
111+
<api-parameters [parameters]="apiParameters"></api-parameters>

‎demo/src/app/components/+label/label-section.component.ts

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { Component } from '@angular/core';
22
@Component({
33
selector: 'demo-label-section',
4-
templateUrl: './label-section.component.html',
4+
templateUrl: './label-section.component.html'
55
})
66
export class DemoLabelSectionComponent {
7-
87
public color?: string;
98
public color1?: string;
109

@@ -47,36 +46,46 @@ export class DemoLabelSectionComponent {
4746
}
4847
];
4948

50-
public statusLabels = [{
51-
name: '未开始',
52-
icon: 'wtf-pending',
53-
color: '#fa5a55'
54-
}, {
55-
name: '进行中',
56-
icon: 'wtf-processing',
57-
color: '#ef7bde'
58-
}, {
59-
name: '已完成',
60-
icon: 'wtf-completed',
61-
color: '#22d7bb'
62-
}];
49+
public statusLabels = [
50+
{
51+
name: '未开始',
52+
icon: 'minus-circle',
53+
color: '#fa5a55'
54+
},
55+
{
56+
name: '进行中',
57+
icon: 'clock-circle-moment',
58+
color: '#ef7bde'
59+
},
60+
{
61+
name: '已完成',
62+
icon: 'check-circle',
63+
color: '#22d7bb'
64+
}
65+
];
6366

64-
public relationLabels = [{
65-
name: '阻塞',
66-
color: '#ff5b57'
67-
}, {
68-
name: '被阻塞',
69-
color: '#ff5b57'
70-
}, {
71-
name: '涉及',
72-
color: '#ffc442'
73-
}, {
74-
name: '被涉及',
75-
color: '#ffc442'
76-
}, {
77-
name: '重复',
78-
color: '#22d7bb'
79-
}];
67+
public relationLabels = [
68+
{
69+
name: '阻塞',
70+
color: '#ff5b57'
71+
},
72+
{
73+
name: '被阻塞',
74+
color: '#ff5b57'
75+
},
76+
{
77+
name: '涉及',
78+
color: '#ffc442'
79+
},
80+
{
81+
name: '被涉及',
82+
color: '#ffc442'
83+
},
84+
{
85+
name: '重复',
86+
color: '#22d7bb'
87+
}
88+
];
8089

8190
constructor() {
8291
this.color = '#7076fa';
@@ -94,5 +103,4 @@ export class DemoLabelSectionComponent {
94103
showMore() {
95104
alert('show more menu');
96105
}
97-
98106
}

‎src/label/label.component.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
1-
<i class="mr-1" [ngClass]="beforeIconClass" [ngStyle]="{'color': _color}" *ngIf="beforeIconClass"></i><ng-content></ng-content>
2-
<ng-content></ng-content><i class="ml-1" [ngClass]="afterIconClass" *ngIf="afterIconClass" (click)="remove()"></i>
1+
<thy-icon class="mr-1" [thyIconName]="beforeIconName" [ngStyle]="{ color: _color }" *ngIf="beforeIconName"></thy-icon>
2+
<ng-content></ng-content>
3+
<ng-content></ng-content>
4+
<thy-icon
5+
class="ml-1"
6+
[thyIconName]="afterIconName"
7+
(click)="remove()"
8+
[ngStyle]="{ color: _color }"
9+
*ngIf="afterIconName"
10+
></thy-icon>

0 commit comments

Comments
 (0)
0