MeterGroup docs added
tugcekucukoglu
parent
1b19837e16
commit
3aae1bf675
|
|
@ -399,6 +399,11 @@
|
||||||
"name": "Inplace",
|
"name": "Inplace",
|
||||||
"to": "/inplace"
|
"to": "/inplace"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "MeterGroup",
|
||||||
|
"to": "/metergroup",
|
||||||
|
"badge": "NEW"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "ScrollTop",
|
"name": "ScrollTop",
|
||||||
"to": "/scrolltop"
|
"to": "/scrolltop"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||||
|
<h3>Screen Reader</h3>
|
||||||
|
<p>MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.</p>
|
||||||
|
|
||||||
|
<h3>Keyboard Support</h3>
|
||||||
|
<p>Component does not include any interactive elements.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>MeterGroup is used with the <i>value</i> property.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs" />
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
import MeterGroup from 'primevue/metergroup';
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
Default layout of MeterGroup is <i>horizontal</i>, and also <i>orientation</i> property can be set as <i>vertical</i>.In addition, position of the label can be changed using <i>labelPosition</i> property that the default value is
|
||||||
|
<i>end</i> and also <i>start</i> option is available.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelOrientation="vertical" labelPosition="start" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [{ label: 'Space used', value: 15 }],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" :min="-50" :max="50" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" :min="-50" :max="50" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [{ label: 'Space used', value: 15 }],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" :min="-50" :max="50" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([{ label: 'Space used', value: 15 }]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
MeterGroup offers meter customization with the <i>meter</i> template that receives the meter instance from the value as a parameter and also <i>label</i> template receives value instance. In addition, the <i>start</i> and <i>end</i> slots
|
||||||
|
are available to define the start and end templating for MeterGroup respectively.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-column text-sm gap-2">
|
||||||
|
<template v-for="(val, i) of value" :key="i">
|
||||||
|
<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 mt-3 mb-2 justify-content-between">
|
||||||
|
<span>Total spent: {{ totalPercent }}</span>
|
||||||
|
<span>Savings: 1000$ </span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25, icon: 'pi pi-home' },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15, icon: 'pi pi-money-bill' },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20, icon: 'pi pi-credit-card' }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-column text-sm">
|
||||||
|
<template v-for="(val, i) of value" :key="i">
|
||||||
|
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex mt-3 mb-2 justify-content-between">
|
||||||
|
<span>Total spent: {{ totalPercent }}</span>
|
||||||
|
<span>Savings: 1000$ </span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-column text-sm">
|
||||||
|
<template v-for="(val, i) of value" :key="i">
|
||||||
|
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex mt-3 mb-2 justify-content-between">
|
||||||
|
<span>Total spent: {{ totalPercent }}</span>
|
||||||
|
<span>Savings: 1000$ </span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MeterGroup :value="value" labelPosition="start">
|
||||||
|
<template #label="{ value }">
|
||||||
|
<div class="flex flex-column text-sm">
|
||||||
|
<template v-for="(val, i) of value" :key="i">
|
||||||
|
<span :style="{ color: val.color }" class="mt-2">- {{ val.label }} ({{ val.value }}%)</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #start="{ totalPercent }">
|
||||||
|
<div class="flex mt-3 mb-2 justify-content-between">
|
||||||
|
<span>Total spent: {{ totalPercent }}</span>
|
||||||
|
<span>Savings: 1000$ </span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #meter="slotProps">
|
||||||
|
<span :class="slotProps.class" :style="{ backgroundColor: slotProps.value.color, width: slotProps.width }" />
|
||||||
|
</template>
|
||||||
|
</MeterGroup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ color: '#239EF0', label: 'Mortgage', value: 25 },
|
||||||
|
{ color: '#FAA419', label: 'Loan', value: 15 },
|
||||||
|
{ color: '#EE5879', label: 'Credit Card', value: 20 }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Layout of the MeterGroup is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex" style="height: 350px">
|
||||||
|
<MeterGroup :value="value" orientation="vertical" />
|
||||||
|
</div>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
||||||
|
{ color: '#FB923C', label: 'Messages', value: 36 },
|
||||||
|
{ color: '#C084FC', label: 'Other', value: 24 }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<MeterGroup :value="value" orientation="vertical" />
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex" style="height: 350px">
|
||||||
|
<MeterGroup :value="value" orientation="vertical" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
||||||
|
{ color: '#FB923C', label: 'Messages', value: 36 },
|
||||||
|
{ color: '#C084FC', label: 'Other', value: 24 }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
<\/script>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex" style="height: 350px">
|
||||||
|
<MeterGroup :value="value" orientation="vertical" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const value = ref([
|
||||||
|
{ color: '#4ADE81', label: 'E-mails', value: 17 },
|
||||||
|
{ color: '#FB923C', label: 'Messages', value: 36 },
|
||||||
|
{ color: '#C084FC', label: 'Other', value: 24 }
|
||||||
|
]);
|
||||||
|
<\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>{{ $attrs.description }}</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card">
|
||||||
|
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>MeterGroup Pass Through</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||||
|
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||||
|
import PTImage from './PTImage.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'pt.image',
|
||||||
|
label: 'Wireframe',
|
||||||
|
component: PTImage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt.doc.metergroup',
|
||||||
|
label: 'MeterGroup PT Options',
|
||||||
|
component: DocApiTable,
|
||||||
|
data: getPTOption('MeterGroup')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>List of class names used in the styled mode.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="doc-tablewrapper">
|
||||||
|
<table class="doc-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Element</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup</td>
|
||||||
|
<td>Container element.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-horizontal</td>
|
||||||
|
<td>Container element when orientation mode is horizontal.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-vertical</td>
|
||||||
|
<td>Container element when orientation mode is vertical.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-meter-container</td>
|
||||||
|
<td>Container of the meters.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-meter</td>
|
||||||
|
<td>Content of a meter.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list</td>
|
||||||
|
<td>Container element of the list of labels.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-start</td>
|
||||||
|
<td>Container element when label position is start.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-end</td>
|
||||||
|
<td>Container element when label position is end.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-horizontal</td>
|
||||||
|
<td>Container element when label orientation is horizontal.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-vertical</td>
|
||||||
|
<td>Container element when label orientation is vertical.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-item</td>
|
||||||
|
<td>Container element of a list item.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label-list-type</td>
|
||||||
|
<td>Container element of a list type.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-metergroup-label</td>
|
||||||
|
<td>Content of a label.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||||
|
Tailwind CSS.
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>MeterGroup Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import TailwindDoc from './TailwindDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'theming.styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'theming.unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'theming.tailwind',
|
||||||
|
label: 'Tailwind',
|
||||||
|
component: TailwindDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<DocComponent title="Vue MeterGroup Component" header="MeterGroup" description="MeterGroup is a group of process status indicators." :componentDocs="docs" :apiDocs="['MeterGroup']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AccessibilityDoc from '@/doc/metergroup/AccessibilityDoc.vue';
|
||||||
|
import BasicDoc from '@/doc/metergroup/BasicDoc.vue';
|
||||||
|
import ImportDoc from '@/doc/metergroup/ImportDoc.vue';
|
||||||
|
import VerticalDoc from '@/doc/metergroup/VerticalDoc.vue';
|
||||||
|
import LabelDoc from '@/doc/metergroup/LabelDoc.vue';
|
||||||
|
import TemplatingDoc from '@/doc/metergroup/TemplatingDoc.vue';
|
||||||
|
import MinMaxDoc from '@/doc/metergroup/MinMaxDoc.vue';
|
||||||
|
import PTComponent from '@/doc/metergroup/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/metergroup/theming/index.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'import',
|
||||||
|
label: 'Import',
|
||||||
|
component: ImportDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'basic',
|
||||||
|
label: 'Basic',
|
||||||
|
component: BasicDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'vertical',
|
||||||
|
label: 'Vertical',
|
||||||
|
component: VerticalDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'label',
|
||||||
|
label: 'Label',
|
||||||
|
component: LabelDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'minmax',
|
||||||
|
label: 'Min-Max',
|
||||||
|
component: MinMaxDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'templating',
|
||||||
|
label: 'Templating',
|
||||||
|
component: TemplatingDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'accessibility',
|
||||||
|
label: 'Accessibility',
|
||||||
|
component: AccessibilityDoc
|
||||||
|
}
|
||||||
|
],
|
||||||
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue