<template> <DocSectionText v-bind="$attrs"> <p>MeterGroup provides templating support for labels, meter items, and content around the meters.</p> </DocSectionText> <div class="card"> <MeterGroup :value="value" labelPosition="start"> <template #label="{ value }"> <div class="flex flex-wrap gap-3"> <template v-for="val of value" :key="val.label"> <Card class="flex-1"> <template #content> <div class="flex justify-content-between gap-5"> <div class="flex flex-column gap-1"> <span class="text-secondary text-sm">{{ val.label }}</span> <span class="font-bold text-lg">{{ val.value }}%</span> </div> <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }"> <i :class="val.icon" /> </span> </div> </template> </Card> </template> </div> </template> <template #meter="slotProps"> <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" /> </template> <template #start="{ totalPercent }"> <div class="flex justify-content-between mt-3 mb-2 relative"> <span>Storage</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span> <span class="font-medium">1TB</span> </div> </template> <template #end> <div class="flex justify-content-between mt-3"> <Button label="Manage Storage" outlined size="small" /> <Button label="Update Plan" size="small" /> </div> </template> </MeterGroup> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { value: [ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' } ], code: { basic: ` <MeterGroup :value="value" labelPosition="start"> <template #label="{ value }"> <div class="flex flex-wrap gap-3"> <template v-for="val of value" :key="val.label"> <Card class="flex-1"> <template #content> <div class="flex justify-content-between gap-5"> <div class="flex flex-column gap-1"> <span class="text-secondary text-sm">{{ val.label }}</span> <span class="font-bold text-lg">{{ val.value }}%</span> </div> <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <i :class="val.icon" /> </span> </div> </template> </Card> </template> </div> </template> <template #meter="slotProps"> <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" /> </template> <template #start="{ totalPercent }"> <div class="flex justify-content-between mt-3 mb-2 relative"> <span>Storage</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span> <span class="font-medium">1TB</span> </div> </template> <template #end> <div class="flex justify-content-between mt-3"> <Button label="Manage Storage" outlined size="small" /> <Button label="Update Plan" size="small" /> </div> </template> </MeterGroup> `, options: ` <template> <div class="card"> <MeterGroup :value="value" labelPosition="start"> <template #label="{ value }"> <div class="flex flex-wrap gap-3"> <template v-for="val of value" :key="val.label"> <Card class="flex-1"> <template #content> <div class="flex justify-content-between gap-5"> <div class="flex flex-column gap-1"> <span class="text-secondary text-sm">{{ val.label }}</span> <span class="font-bold text-lg">{{ val.value }}%</span> </div> <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <i :class="val.icon" /> </span> </div> </template> </Card> </template> </div> </template> <template #meter="slotProps"> <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" /> </template> <template #start="{ totalPercent }"> <div class="flex justify-content-between mt-3 mb-2 relative"> <span>Storage</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span> <span class="font-medium">1TB</span> </div> </template> <template #end> <div class="flex justify-content-between mt-3"> <Button label="Manage Storage" outlined size="small" /> <Button label="Update Plan" size="small" /> </div> </template> </MeterGroup> </div> </template> <script> export default { data() { return { value: [ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' } ] }; } }; <\/script> `, composition: ` <template> <div class="card"> <MeterGroup :value="value" labelPosition="start"> <template #label="{ value }"> <div class="flex flex-wrap gap-3"> <template v-for="val of value" :key="i"> <Card class="flex-1"> <template #content> <div class="flex justify-content-between gap-5"> <div class="flex flex-column gap-1"> <span class="text-secondary text-sm">{{ val.label }}</span> <span class="font-bold text-lg">{{ val.value }}%</span> </div> <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" :style="{ backgroundColor: \`\${val.color1}\`, color: '#ffffff' }"> <i :class="val.icon" /> </span> </div> </template> </Card> </template> </div> </template> <template #meter="slotProps"> <span :class="slotProps.class" :style="{ background: \`linear-gradient(to right, \${slotProps.value.color1}, \${slotProps.value.color2})\`, width: slotProps.size }" /> </template> <template #start="{ totalPercent }"> <div class="flex justify-content-between mt-3 mb-2 relative"> <span>Storage</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span> <span class="font-medium">1TB</span> </div> </template> <template #end> <div class="flex justify-content-between mt-3"> <Button label="Manage Storage" outlined size="small" /> <Button label="Update Plan" size="small" /> </div> </template> </MeterGroup> </div> </template> <script setup> import { ref } from "vue"; const value = ref([ { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' }, { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' }, { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' }, { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog' } ]); <\/script> ` } }; } }; </script>