vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

MeterGroup demo updates

pull/5098/head
tugcekucukoglu 2024-01-12 15:26:52 +03:00
parent 1a8ffe6f0a
commit 6c5c50efca
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
doc/metergroup/MinMaxDoc.vue
View File

@ -3,7 +3,7 @@
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
</DocSectionText>
<div class="card">
<MeterGroup :value="value" :min="-50" :max="50" />
<MeterGroup :value="value" :max="120" />
</div>
<DocSectionCode :code="code" />
</template>
@ -12,15 +12,20 @@
export default {
data() {
return {
value: [{ label: 'Space used', value: 15, color: '#FDBB74' }],
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
],
code: {
basic: `
<MeterGroup :value="value" :min="-50" :max="50" />
<MeterGroup :value="value" :max="120" />
`,
options: `
<template>
<div class="card">
<MeterGroup :value="value" :min="-50" :max="50" />
<MeterGroup :value="value" :max="120" />
</div>
</template>
@ -28,7 +33,12 @@ export default {
export default {
data() {
return {
value: [{ label: 'Space used', value: 15 }],
value: [
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
],
};
}
};
@ -37,14 +47,19 @@ export default {
composition: `
<template>
<div class="card">
<MeterGroup :value="value" :min="-50" :max="50" />
<MeterGroup :value="value" :max="120" />
</div>
</template>
<script setup>
import { ref } from "vue";
const value = ref([{ label: 'Space used', value: 15 }]);
const value = ref([
{ label: 'Apps', value: 16, color: '#EB9A9C', icon: 'pi pi-cog' },
{ label: 'Messages', value: 8, color: '#FFCF91', icon: 'pi pi-envelope' },
{ label: 'Media', value: 24, color: '#93DEAC', icon: 'pi pi-image' },
{ label: 'System Data', value: 20, color: '#91cff8', icon: 'pi pi-database' }
]);
<\/script>
`
}

5
doc/metergroup/TemplatingDoc.vue
View File

@ -18,8 +18,9 @@
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex mt-3 mb-2 justify-content-between">
<span>Total spent: {{ totalPercent }}</span>
<div class="flex justify-content-between mt-3 mb-2">
<span>Account </span>
<span :style="{ 'margin-left': totalPercent }" class="absolute">{{ totalPercent }}</span>
<span>Savings: 1000$ </span>
</div>
</template>