Merge pull request #1276 from ladislav-bozek/master

Input parameter 'unit' added to ProgressBar component
primefaces · Nov 30, 2016 · 1718fc7 · 1718fc7
2 parents 0d7a09f + dc6b2b4
commit 1718fc7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/components/progressbar/progressbar.ts b/components/progressbar/progressbar.ts
@@ -6,7 +6,7 @@ import {CommonModule} from '@angular/common';
     template: `
         <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" [attr.aria-valuenow]="value" aria-valuemax="100">
             <div class="ui-progressbar-value ui-progressbar-value-animate ui-widget-header ui-corner-all" [style.width]="value + '%'" style="display:block"></div>
-            <div class="ui-progressbar-label" [style.display]="value ? 'block' : 'none'" *ngIf="showValue">{{value}}%</div>
+            <div class="ui-progressbar-label" [style.display]="value ? 'block' : 'none'" *ngIf="showValue">{{value}}{{unit}}</div>
         </div>
     `
 })
@@ -16,6 +16,8 @@ export class ProgressBar {
 
     @Input() showValue: boolean = true;
 
+    @Input() unit: string = '%';
+
 }
 
 @NgModule({

diff --git a/showcase/demo/progressbar/progressbardemo.html b/showcase/demo/progressbar/progressbardemo.html
@@ -61,6 +61,18 @@ <h3>Attributes</h3>
                             <td>null</td>
                             <td>Current value of the progress.</td>
                         </tr>
+                        <tr>
+                            <td>showValue</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Show or hide progress bar value.</td>
+                        </tr>
+                        <tr>
+                            <td>unit</td>
+                            <td>string</td>
+                            <td>%</td>
+                            <td>Unit sign appended to the value.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>