From 36f18ec5c2955ef0293c18912d2d563eaeea56e0 Mon Sep 17 00:00:00 2001 From: Vineeth Prakash Date: Sun, 9 Oct 2022 18:21:36 +0530 Subject: [PATCH 1/2] Added STYLE and STYLECLASS in properties --- .../progressbar/progressbardemo.html | 170 +++++++++++------- 1 file changed, 102 insertions(+), 68 deletions(-) diff --git a/src/app/showcase/components/progressbar/progressbardemo.html b/src/app/showcase/components/progressbar/progressbardemo.html index 1b6af7cdb27..f9b42ae537c 100755 --- a/src/app/showcase/components/progressbar/progressbardemo.html +++ b/src/app/showcase/components/progressbar/progressbardemo.html @@ -3,7 +3,10 @@

ProgressBar

ProgressBar is a process status indicator.

- +
@@ -17,7 +20,10 @@
Static
Indeterminate
- +
@@ -25,29 +31,32 @@
Indeterminate
Import
- -import {ProgressBarModule} from 'primeng/progressbar'; - + + import {ProgressBarModule} from 'primeng/progressbar'; +
Getting Started
-

ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.

- -<p-progressBar [value]="value"></p-progressBar> - - - -export class ModelComponent { - - value: number = 0; - -} - - -

Indeterminate has no such a requirement and is simple enabled using mode property.

- - -<p-progressBar mode="indeterminate"></p-progressBar> - +

+ ProgressBar has two modes; "determinate" and "indeterminate". + Former requires a value between 0 and 100 to display the + progress. +

+ + <p-progressBar [value]="value"></p-progressBar> + + + + export class ModelComponent { value: number = 0; } + + +

+ Indeterminate has no such a requirement and is simple enabled + using mode property. +

+ + + <p-progressBar mode="indeterminate"></p-progressBar> +
Properties
@@ -73,6 +82,18 @@
Properties
true Show or hide progress bar value. + + style + object + null + Inline style of the component. + + + styleClass + string + null + Style class of the component. + unit string @@ -83,14 +104,21 @@
Properties
mode string determinate - Defines the mode of the progress, valid values are "determinate" and "indeterminate". + + Defines the mode of the progress, valid values + are "determinate" and "indeterminate". +
Styling
-

Following is the list of structural style classes, for theming classes visit theming page.

+

+ Following is the list of structural style classes, for theming + classes visit + theming page. +

@@ -106,19 +134,28 @@
Styling
- + - + - + - +
p-progressbar-determinateContainer element of a determinate progressbar. + Container element of a determinate progressbar. +
p-progressbar-indeterminateContainer element of an indeterminate progressbar. + Container element of an indeterminate + progressbar. +
p-progressbar-valueElement whose width changes according to value. + Element whose width changes according to value. +
p-progressbar-labelLabel element that displays the current value. + Label element that displays the current value. +
@@ -129,53 +166,50 @@
Dependencies
- + View on GitHub - + Edit in StackBlitz - -<p-toast></p-toast> - -<div class="card"> - <h5>Dynamic</h5> - <p-progressBar [value]="value"></p-progressBar> - - <h5>Static</h5> - <p-progressBar></p-progressBar> - - <h5>Indeterminate</h5> - <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar> -</div> - - - -export class ProgressBarDemo { - - value: number = 0; - - constructor(private messageService: MessageService) {} - - ngOnInit() { - let interval = setInterval(() => { - this.value = this.value + Math.floor(Math.random() * 10) + 1; - if (this.value >= 100) { - this.value = 100; - this.messageService.add({severity: 'info', summary: 'Success', detail: 'Process Completed'}); - clearInterval(interval); - } - }, 2000); - } - -} - - + + <p-toast></p-toast> <div class="card"> + <h5>Dynamic</h5> <p-progressBar + [value]="value"></p-progressBar> + <h5>Static</h5> + <p-progressBar></p-progressBar> + <h5>Indeterminate</h5> <p-progressBar + mode="indeterminate" [style]="{'height': + '6px'}"></p-progressBar> </div> + + + + export class ProgressBarDemo { value: number = 0; + constructor(private messageService: MessageService) {} + ngOnInit() { let interval = setInterval(() => { + this.value = this.value + Math.floor(Math.random() * 10) + 1; if + (this.value >= 100) { this.value = 100; + this.messageService.add({severity: 'info', summary: + 'Success', detail: 'Process Completed'}); + clearInterval(interval); } }, 2000); } } + - + From cd5d1337fc0f433190f2e098babd861b4fe452a2 Mon Sep 17 00:00:00 2001 From: Vineeth Prakash Date: Sun, 9 Oct 2022 19:03:11 +0530 Subject: [PATCH 2/2] Reverted the Prettifier effects --- .../progressbar/progressbardemo.html | 158 ++++++++---------- 1 file changed, 68 insertions(+), 90 deletions(-) diff --git a/src/app/showcase/components/progressbar/progressbardemo.html b/src/app/showcase/components/progressbar/progressbardemo.html index f9b42ae537c..5da85b4ea36 100755 --- a/src/app/showcase/components/progressbar/progressbardemo.html +++ b/src/app/showcase/components/progressbar/progressbardemo.html @@ -3,10 +3,7 @@

ProgressBar

ProgressBar is a process status indicator.

- +
@@ -20,10 +17,7 @@
Static
Indeterminate
- +
@@ -31,32 +25,29 @@
Indeterminate
Import
- - import {ProgressBarModule} from 'primeng/progressbar'; - + +import {ProgressBarModule} from 'primeng/progressbar'; +
Getting Started
-

- ProgressBar has two modes; "determinate" and "indeterminate". - Former requires a value between 0 and 100 to display the - progress. -

- - <p-progressBar [value]="value"></p-progressBar> - - - - export class ModelComponent { value: number = 0; } - - -

- Indeterminate has no such a requirement and is simple enabled - using mode property. -

- - - <p-progressBar mode="indeterminate"></p-progressBar> - +

ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.

+ +<p-progressBar [value]="value"></p-progressBar> + + + +export class ModelComponent { + + value: number = 0; + +} + + +

Indeterminate has no such a requirement and is simple enabled using mode property.

+ + +<p-progressBar mode="indeterminate"></p-progressBar> +
Properties
@@ -104,21 +95,14 @@
Properties
mode string determinate - - Defines the mode of the progress, valid values - are "determinate" and "indeterminate". - + Defines the mode of the progress, valid values are "determinate" and "indeterminate".
Styling
-

- Following is the list of structural style classes, for theming - classes visit - theming page. -

+

Following is the list of structural style classes, for theming classes visit theming page.

@@ -134,28 +118,19 @@
Styling
- + - + - + - +
p-progressbar-determinate - Container element of a determinate progressbar. - Container element of a determinate progressbar.
p-progressbar-indeterminate - Container element of an indeterminate - progressbar. - Container element of an indeterminate progressbar.
p-progressbar-value - Element whose width changes according to value. - Element whose width changes according to value.
p-progressbar-label - Label element that displays the current value. - Label element that displays the current value.
@@ -166,50 +141,53 @@
Dependencies
- + View on GitHub - + Edit in StackBlitz - - <p-toast></p-toast> <div class="card"> - <h5>Dynamic</h5> <p-progressBar - [value]="value"></p-progressBar> - <h5>Static</h5> - <p-progressBar></p-progressBar> - <h5>Indeterminate</h5> <p-progressBar - mode="indeterminate" [style]="{'height': - '6px'}"></p-progressBar> </div> - - - - export class ProgressBarDemo { value: number = 0; - constructor(private messageService: MessageService) {} - ngOnInit() { let interval = setInterval(() => { - this.value = this.value + Math.floor(Math.random() * 10) + 1; if - (this.value >= 100) { this.value = 100; - this.messageService.add({severity: 'info', summary: - 'Success', detail: 'Process Completed'}); - clearInterval(interval); } }, 2000); } } - + +<p-toast></p-toast> + +<div class="card"> + <h5>Dynamic</h5> + <p-progressBar [value]="value"></p-progressBar> + + <h5>Static</h5> + <p-progressBar></p-progressBar> + + <h5>Indeterminate</h5> + <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar> +</div> + + + +export class ProgressBarDemo { + + value: number = 0; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + let interval = setInterval(() => { + this.value = this.value + Math.floor(Math.random() * 10) + 1; + if (this.value >= 100) { + this.value = 100; + this.messageService.add({severity: 'info', summary: 'Success', detail: 'Process Completed'}); + clearInterval(interval); + } + }, 2000); + } + +} + + - +