214 lines
10 KiB
Vue
214 lines
10 KiB
Vue
|
<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>
|