diff --git a/components/lib/metergroup/MeterGroup.d.ts b/components/lib/metergroup/MeterGroup.d.ts index f6dd6fcb1..ddf934e7c 100644 --- a/components/lib/metergroup/MeterGroup.d.ts +++ b/components/lib/metergroup/MeterGroup.d.ts @@ -222,6 +222,19 @@ export interface MeterGroupSlots { */ totalPercent: string; }): VNode[]; + /** + * Custom icon template. + */ + icon(scope: { + /** + * Current value of the component + */ + value: MeterItemOptions; + /** + * Style class of the icon + */ + class: string; + }): VNode[]; /** * Custom start template. */ diff --git a/components/lib/metergroup/MeterGroup.vue b/components/lib/metergroup/MeterGroup.vue index b3856a42c..4e0773d54 100644 --- a/components/lib/metergroup/MeterGroup.vue +++ b/components/lib/metergroup/MeterGroup.vue @@ -3,7 +3,10 @@
  1. - + + + + {{ val.label }} ({{ percentValue(val.value) }})
diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js index c7800ea9b..9f402c35d 100644 --- a/components/lib/metergroup/style/MeterGroupStyle.js +++ b/components/lib/metergroup/style/MeterGroupStyle.js @@ -26,12 +26,16 @@ const css = ` list-style-type: none; } - .p-metergroup-label-list-horizontal { + .p-metergroup-vertical .p-metergroup-label-list { + align-items: start; + } + + .p-metergroup-horizontal .p-metergroup-label-list-vertical { flex-direction: column; } - .p-metergroup-vertical .p-metergroup-label-list-vertical { - align-items: start; + .p-metergroup-vertical .p-metergroup-label-list-horizontal { + flex-direction: column; } .p-metergroup-label-list-item { @@ -42,6 +46,12 @@ const css = ` .p-metergroup-label-type { display: inline-block; } + + .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: .5rem; + } } `; @@ -65,6 +75,7 @@ const classes = { } ], labellistitem: 'p-metergroup-label-list-item', + labelicon: 'p-metergroup-label-icon', labellisttype: 'p-metergroup-label-type', label: 'p-metergroup-label' };