MeterGroup docs added
tugcekucukoglu
parent
1b19837e16
commit
3aae1bf675
|
|
@ -399,6 +399,11 @@
|
|||
"name": "Inplace",
|
||||
"to": "/inplace"
|
||||
},
|
||||
{
|
||||
"name": "MeterGroup",
|
||||
"to": "/metergroup",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "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