8000 feat(progress): change tips type is string or templateref · atinc/ngx-tethys@45a8b4e · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 45a8b4e

Browse files
author
zhangwei
committed
feat(progress): change tips type is string or templateref
1 parent 902f04f commit 45a8b4e

File tree

10 files changed

+1127
-343
lines changed

10 files changed

+1127
-343
lines changed

‎demo/src/app/components/+progress/api-parameters.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const apiParameters = [
2525
default: '100'
2626
},
2727
{
28-
property: 'thyProgressTipsTemplate',
28+
property: 'thyProgressTips',
2929
description: '鼠标移入progress bar时显示的tooltips模板',
3030
type: 'template',
3131
default: 'null'

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,17 @@ <h2>Stacked Progress</h2>
4040
</div>
4141
<div class="body">
4242
<button thyButton="outline-primary-square" (click)="randomStacked()">随机生成 Stacked 值</button>
43-
<button thyButton="outline-primary-square" class="ml-2" (click)="randomCustomColorStacked()">
43+
<button
44+
thyButton="outline-primary-square"
45+
class="ml-2"
46+
(click)="randomCustomColorStacked(customGeneralProgressTooTip)"
47+
>
4448
随机生成自定义颜色 Stacked 值
4549
</button>
4650
<div class="demo-layout mt-2">
4751
<thy-progress [thyValue]="stacked"></thy-progress>
4852
</div>
49-
<pre class="mt-2"><code lang="typescript" [highlight]="stacked | json"></code></pre>
53+
<pre class="mt-2"><code lang="typescript" [highlight]="stackedCodeExample"></code></pre>
5054
</div>
5155
</section>
5256

@@ -56,16 +60,31 @@ <h2>Stacked Progress with tooltip</h2>
5660
</div>
5761
<div class="body">
5862
<button thyButton="outline-primary-square" (click)="randomStacked()">随机生成 Stacked 值</button>
59-
<button thyButton="outline-primary-square" class="ml-2" (click)="randomCustomColorStacked()">
63+
<button
64+
thyButton="outline-primary-square"
65+
class="ml-2"
66+
(click)="randomCustomColorStacked(customGeneralProgressTooTip)"
67+
>
6068
随机生成自定义颜色 Stacked 值
6169
</button>
6270
<div class="demo-layout mt-2">
63-
<thy-progress [thyValue]="stacked" [thyProgressTipsTemplate]="customProgressTooTip"></thy-progress>
71+
<thy-progress [thyValue]="stacked" [thyProgressTips]="customProgressTooTip"></thy-progress>
72+
<thy-progress
73+
class="mt-2"
74+
[thyProgressTips]="customGeneralProgressTooTip"
75+
thyType="success"
76+
[thyValue]="value"
77+
[thySize]="size"
78+
></thy-progress>
6479
</div>
6580
<pre class="mt-2"><code lang="typescript" [highlight]="tooltipCodeExample"></code></pre>
6681
</div>
6782
</section>
6883

84+
<ng-template #customGeneralProgressTooTip let-value>
85+
<div>value is: {{ value }}</div>
86+
</ng-template>
87+
6988
<ng-template #customProgressTooTip let-item>
7089
<div>color: {{ item.color }}</div>
7190
<div>value: {{ item.value }}</div>

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, TemplateRef } from '@angular/core';
22
import { clamp } from '../../../../../src/util/helpers';
33
import { apiParameters } from './api-parameters';
44

@@ -36,6 +36,8 @@ export class DemoProgressSectionComponent implements OnInit {
3636

3737
basicCodeExample = require('!!raw-loader!./basic/progress-basic-demo.component.html');
3838

39+
stackedCodeExample = require('!!raw-loader!./stacked/progress-stacked-demo.component.html');
40+
3941
tooltipCodeExample = require('!!raw-loader!./template/template.component.html');
4042

4143
apiParameters = apiParameters;
@@ -92,15 +94,15 @@ export class DemoProgressSectionComponent implements OnInit {
9294
return result;
9395
}
9496

95-
randomCustomColorStacked() {
97+
randomCustomColorStacked(templateRef?: TemplateRef<HTMLElement>) {
9698
const stacked = [];
9799
const colorIndexes = this.getUniqueIndexes(5, allColors.length);
98100
for (let i = 0; i < 5; i++) {
99101
const value = Math.floor(Math.random() * 100 + 10);
100102
stacked.push({
101103
value,
102104
color: allColors[colorIndexes[i]],
103-
tooltip: value > 20 ? `value: ${value}` : null
105+
tips: value > 30 ? `value: ${value}` : templateRef
104106
});
105107
}
106108
this.stacked = stacked;

‎demo/src/app/components/+progress/template/template.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<thy-progress [thyValue]="stacked" [thyProgressTipsTemplate]="customProgressTooTip"></thy-progress>
1+
<thy-progress [thyValue]="stacked" [thyProgressTips]="customProgressTooTip"></thy-progress>
22
<ng-template #customProgressTooTip let-item>
33
<div>color: {{ item.color }}</div>
44
<div>value: {{ item.value }}</div>

0 commit comments

Comments
 (0)
0