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> <p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<MeterGroup :value="value" :min="-50" :max="50" /> <MeterGroup :value="value" :max="120" />
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -12,15 +12,20 @@
export default { export default {
data() { data() {
return { 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: { code: {
basic: ` basic: `
<MeterGroup :value="value" :min="-50" :max="50" /> <MeterGroup :value="value" :max="120" />
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<MeterGroup :value="value" :min="-50" :max="50" /> <MeterGroup :value="value" :max="120" />
</div> </div>
</template> </template>
@ -28,7 +33,12 @@ export default {
export default { export default {
data() { data() {
return { 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: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<MeterGroup :value="value" :min="-50" :max="50" /> <MeterGroup :value="value" :max="120" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; 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> <\/script>
` `
} }

5
doc/metergroup/TemplatingDoc.vue
View File

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