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>
<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>
<div class="card">
<MeterGroup :value="value" />

37
doc/metergroup/TemplatingDoc.vue
View File

@ -20,12 +20,12 @@
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<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>
</div>
</template>
<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>
</MeterGroup>
</div>
@ -45,21 +45,24 @@ export default {
basic: `
<MeterGroup :value="value" labelPosition="start">
<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">
<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>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<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>
</div>
</template>
<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>
</MeterGroup>
`,
@ -68,21 +71,24 @@ export default {
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<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">
<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>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<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>
</div>
</template>
<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>
</MeterGroup>
</div>
@ -107,21 +113,24 @@ export default {
<div class="card">
<MeterGroup :value="value" labelPosition="start">
<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">
<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>
</div>
</template>
<template #start="{ totalPercent }">
<div class="flex justify-content-between mt-3 mb-2">
<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>
</div>
</template>
<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>
</MeterGroup>
</div>