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

MeterGroup doc updates

pull/5110/head
tugcekucukoglu 2024-01-18 15:55:13 +03:00
parent 3f9f21da3a
commit 7b7eb3df1d
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/metergroup/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>MeterGroup is used with the <i>value</i> property.</p> <p>MeterGroup requires <i>value</i> as the data to display.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<MeterGroup :value="value" /> <MeterGroup :value="value" />

37
doc/metergroup/TemplatingDoc.vue
View File

@ -20,12 +20,12 @@
<template #start="{ totalPercent }"> <template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2"> <div class="flex justify-content-between mt-3 mb-2">
<span>Account </span> <span>Account </span>
<span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span> <span>Savings: 1000$ </span>
</div> </div>
</template> </template>
<template #meter="slotProps"> <template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" /> <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template> </template>
</MeterGroup> </MeterGroup>
</div> </div>
@ -45,21 +45,24 @@ export default {
basic: ` basic: `
<MeterGroup :value="value" labelPosition="start"> <MeterGroup :value="value" labelPosition="start">
<template #label="{ value }"> <template #label="{ value }">
<div class="flex flex-column text-sm"> <div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i"> <template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span> <span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template> </template>
</div> </div>
</template> </template>
<template #start="{ totalPercent }"> <template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2"> <div class="flex justify-content-between mt-3 mb-2">
<span>Account </span> <span>Account </span>
<span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span> <span>Savings: 1000$ </span>
</div> </div>
</template> </template>
<template #meter="slotProps"> <template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" /> <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template> </template>
</MeterGroup> </MeterGroup>
`, `,
@ -68,21 +71,24 @@ export default {
<div class="card"> <div class="card">
<MeterGroup :value="value" labelPosition="start"> <MeterGroup :value="value" labelPosition="start">
<template #label="{ value }"> <template #label="{ value }">
<div class="flex flex-column text-sm"> <div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i"> <template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span> <span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template> </template>
</div> </div>
</template> </template>
<template #start="{ totalPercent }"> <template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2"> <div class="flex justify-content-between mt-3 mb-2">
<span>Account </span> <span>Account </span>
<span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span> <span>Savings: 1000$ </span>
</div> </div>
</template> </template>
<template #meter="slotProps"> <template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" /> <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template> </template>
</MeterGroup> </MeterGroup>
</div> </div>
@ -107,21 +113,24 @@ export default {
<div class="card"> <div class="card">
<MeterGroup :value="value" labelPosition="start"> <MeterGroup :value="value" labelPosition="start">
<template #label="{ value }"> <template #label="{ value }">
<div class="flex flex-column text-sm"> <div class="flex flex-column text-sm gap-2">
<template v-for="(val, i) of value" :key="i"> <template v-for="(val, i) of value" :key="i">
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span> <span :style="{ color: val.color }" class="flex gap-2">
<i :class="val.icon" />
{{ val.label }} ({{ val.value }}%)</span
>
</template> </template>
</div> </div>
</template> </template>
<template #start="{ totalPercent }"> <template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2"> <div class="flex justify-content-between mt-3 mb-2">
<span>Account </span> <span>Account </span>
<span :style="{ width: totalPercent }" class="absolute text-right">{{ totalPercent }}</span> <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
<span>Savings: 1000$ </span> <span>Savings: 1000$ </span>
</div> </div>
</template> </template>
<template #meter="slotProps"> <template #meter="slotProps">
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" /> <span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.size }" />
</template> </template>
</MeterGroup> </MeterGroup>
</div> </div>