Remove old docs
tugcekucukoglu
parent
5c139245ae
commit
46bf8838ba
|
|
@ -21,6 +21,7 @@ export default {
|
||||||
id: 'pt.image',
|
id: 'pt.image',
|
||||||
label: 'Wireframe',
|
label: 'Wireframe',
|
||||||
component: PTImage
|
component: PTImage
|
||||||
|
label: 'Viewer',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'pt.doc.confirmdialog',
|
id: 'pt.doc.confirmdialog',
|
||||||
|
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
|
||||||
<h3>Screen Reader</h3>
|
|
||||||
<p>
|
|
||||||
Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
|
|
||||||
item defines <i>aria-current</i> as "step".
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Key</th>
|
|
||||||
<th>Function</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>tab</i>
|
|
||||||
</td>
|
|
||||||
<td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>enter</i>
|
|
||||||
</td>
|
|
||||||
<td>Activates the focused step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>space</i>
|
|
||||||
</td>
|
|
||||||
<td>Activates the focused step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>right arrow</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the next step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>left arrow</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the previous step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>home</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the first step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>end</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the last step if readonly is not enabled.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</DocSectionText>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Steps requires a collection of menuitems as its <i>model</i>.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<Steps :model="items" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-8 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
<Steps v-model:activeStep="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
<Steps v-model:activeStep="active" :model="items" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
<Steps v-model:activeStep="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
<Steps v-model:activeStep="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const active = ref(0);
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs" />
|
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
import Steps from 'primevue/steps';
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" :readonly="false" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<Steps :model="items" :readonly="false" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" :readonly="false" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{
|
|
||||||
label: 'Personal Info'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reservation'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Review'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
|
||||||
<template #item="{ item, active }">
|
|
||||||
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
|
|
||||||
<i :class="[item.icon, '!text-xl']" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Steps>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: 'pi pi-user'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-calendar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-check'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
|
||||||
<template #item="{ item, active }">
|
|
||||||
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
|
|
||||||
<i :class="[item.icon, '!text-xl']" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Steps>
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
|
||||||
<template #item="{ item, active }">
|
|
||||||
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
|
|
||||||
<i :class="[item.icon, '!text-xl']" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Steps>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
icon: 'pi pi-user'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-calendar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-check'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep(.custom-steps) {
|
|
||||||
.p-steps-item:before {
|
|
||||||
margin-top: 0;
|
|
||||||
border-color: var(--p-primary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/style>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<Steps :model="items" class="custom-steps" :readonly="false">
|
|
||||||
<template #item="{ item, active }">
|
|
||||||
<span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
|
|
||||||
<i :class="[item.icon, '!text-xl']" />
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</Steps>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{
|
|
||||||
icon: 'pi pi-user'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-calendar'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'pi pi-check'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
<\/script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep(.custom-steps) {
|
|
||||||
.p-steps-item:before {
|
|
||||||
margin-top: 0;
|
|
||||||
border-color: var(--p-primary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/style>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
::v-deep(.custom-steps) {
|
|
||||||
.p-steps-item:before {
|
|
||||||
margin-top: 0;
|
|
||||||
border-color: var(--p-primary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<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/steps.jpg" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="doc-main">
|
|
||||||
<div class="doc-intro">
|
|
||||||
<h1>Steps Pass Through</h1>
|
|
||||||
</div>
|
|
||||||
<DocSections :docs="docs" />
|
|
||||||
</div>
|
|
||||||
<DocSectionNav :docs="docs" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
|
||||||
import { getPTOptions } from '@/components/doc/helpers';
|
|
||||||
import PTImage from './PTImage.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'pt.image',
|
|
||||||
label: 'Wireframe',
|
|
||||||
component: PTImage
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pt.doc.steps',
|
|
||||||
label: 'Steps PT Options',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getPTOptions('Steps')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>
|
|
||||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
|
||||||
PrimeVue components with Tailwind CSS.
|
|
||||||
</p>
|
|
||||||
</DocSectionText>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="doc-main">
|
|
||||||
<div class="doc-intro">
|
|
||||||
<h1>Steps Theming</h1>
|
|
||||||
</div>
|
|
||||||
<DocSections :docs="docs" />
|
|
||||||
</div>
|
|
||||||
<DocSectionNav :docs="docs" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
|
||||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
|
||||||
import TailwindDoc from './TailwindDoc.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'theming.styled',
|
|
||||||
label: 'Styled',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 'theming.classes',
|
|
||||||
label: 'CSS Classes',
|
|
||||||
description: 'List of class names used in the styled mode.',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getStyleOptions('Steps')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'theming.tokens',
|
|
||||||
label: 'Design Tokens',
|
|
||||||
description: 'List of design tokens used in a preset.',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getTokenOptions('Steps')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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>
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
|
||||||
<h3>Screen Reader</h3>
|
|
||||||
<p>
|
|
||||||
TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
|
|
||||||
<i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Keyboard Support</h3>
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Key</th>
|
|
||||||
<th>Function</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>tab</i>
|
|
||||||
</td>
|
|
||||||
<td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>enter</i>
|
|
||||||
</td>
|
|
||||||
<td>Activates the focused tab header.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>space</i>
|
|
||||||
</td>
|
|
||||||
<td>Activates the focused tab header.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>right arrow</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the next header.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>left arrow</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the previous header.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>home</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the first header.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<i>end</i>
|
|
||||||
</td>
|
|
||||||
<td>Moves focus to the last header.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</DocSectionText>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
icon: 'pi pi-home',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Transactions',
|
|
||||||
icon: 'pi pi-chart-line',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Products',
|
|
||||||
icon: 'pi pi-list',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Messages',
|
|
||||||
icon: 'pi pi-inbox',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
<Toast />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
<Toast />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
icon: 'pi pi-home',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Transactions',
|
|
||||||
icon: 'pi pi-chart-line',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Products',
|
|
||||||
icon: 'pi pi-list',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Messages',
|
|
||||||
icon: 'pi pi-inbox',
|
|
||||||
command: () => {
|
|
||||||
this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items" />
|
|
||||||
<Toast />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useToast } from "primevue/usetoast";
|
|
||||||
|
|
||||||
const toast = useToast();
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{
|
|
||||||
label: 'Dashboard',
|
|
||||||
icon: 'pi pi-home',
|
|
||||||
command: () => {
|
|
||||||
toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Transactions',
|
|
||||||
icon: 'pi pi-chart-line',
|
|
||||||
command: () => {
|
|
||||||
toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Products',
|
|
||||||
icon: 'pi pi-list',
|
|
||||||
command: () => {
|
|
||||||
toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Messages',
|
|
||||||
icon: 'pi pi-inbox',
|
|
||||||
command: () => {
|
|
||||||
toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenu v-model:activeIndex="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
items: [
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenu v-model:activeIndex="active" :model="items" />
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenu v-model:activeIndex="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
items: [
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="flex mb-2 gap-2 justify-end">
|
|
||||||
<Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
|
|
||||||
<Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
|
|
||||||
<Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabMenu v-model:activeIndex="active" :model="items" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const active = ref(0);
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{ label: 'Dashboard', icon: 'pi pi-home' },
|
|
||||||
{ label: 'Transactions', icon: 'pi pi-chart-line' },
|
|
||||||
{ label: 'Products', icon: 'pi pi-list' },
|
|
||||||
{ label: 'Messages', icon: 'pi pi-inbox' }
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs" />
|
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
import TabMenu from 'primevue/tabmenu';
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
|
|
||||||
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</router-link>
|
|
||||||
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
|
|
||||||
{
|
|
||||||
label: 'Programmatic',
|
|
||||||
icon: 'pi pi-palette',
|
|
||||||
command: () => {
|
|
||||||
this.$router.push('/theming/unstyled');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
|
|
||||||
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</router-link>
|
|
||||||
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
|
|
||||||
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</router-link>
|
|
||||||
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
|
|
||||||
{
|
|
||||||
label: 'Programmatic',
|
|
||||||
icon: 'pi pi-palette',
|
|
||||||
command: () => {
|
|
||||||
this.$router.push('/theming/unstyled');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
|
|
||||||
<a v-ripple :href="href" v-bind="props.action" @click="navigate">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</router-link>
|
|
||||||
<a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
|
|
||||||
<span v-bind="props.icon" />
|
|
||||||
<span v-bind="props.label">{{ item.label }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
|
|
||||||
{
|
|
||||||
label: 'Programmatic',
|
|
||||||
icon: 'pi pi-palette',
|
|
||||||
command: () => {
|
|
||||||
this.$router.push('/theming/unstyled');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
|
|
||||||
<img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
|
|
||||||
<span class="font-bold">{{ item.name }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
<DocSectionCode :code="code" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
|
||||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
|
||||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
|
|
||||||
],
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
|
|
||||||
<img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
|
|
||||||
<span class="font-bold">{{ item.name }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
`,
|
|
||||||
options: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
|
|
||||||
<img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
|
|
||||||
<span class="font-bold">{{ item.name }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
|
||||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
|
||||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
<\/script>
|
|
||||||
`,
|
|
||||||
composition: `
|
|
||||||
<template>
|
|
||||||
<div class="card">
|
|
||||||
<TabMenu :model="items">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<a v-ripple v-bind="props.action" class="flex items-center gap-2">
|
|
||||||
<img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
|
|
||||||
<span class="font-bold">{{ item.name }}</span>
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</TabMenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
const items = ref([
|
|
||||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
|
||||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
|
||||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' }
|
|
||||||
]);
|
|
||||||
<\/script>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="doc-main">
|
|
||||||
<div class="doc-intro">
|
|
||||||
<h1>TabMenu Pass Through</h1>
|
|
||||||
</div>
|
|
||||||
<DocSections :docs="docs" />
|
|
||||||
</div>
|
|
||||||
<DocSectionNav :docs="docs" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
|
||||||
import { getPTOptions } from '@/components/doc/helpers';
|
|
||||||
import PTImage from './PTImage.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'pt.image',
|
|
||||||
label: 'Wireframe',
|
|
||||||
component: PTImage
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pt.doc.tabmenu',
|
|
||||||
label: 'TabMenu PT Options',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getPTOptions('TabMenu')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>
|
|
||||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
|
|
||||||
PrimeVue components with Tailwind CSS.
|
|
||||||
</p>
|
|
||||||
</DocSectionText>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="doc-main">
|
|
||||||
<div class="doc-intro">
|
|
||||||
<h1>TabMenu Theming</h1>
|
|
||||||
</div>
|
|
||||||
<DocSections :docs="docs" />
|
|
||||||
</div>
|
|
||||||
<DocSectionNav :docs="docs" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
|
||||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
|
||||||
import TailwindDoc from './TailwindDoc.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'theming.styled',
|
|
||||||
label: 'Styled',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 'theming.classes',
|
|
||||||
label: 'CSS Classes',
|
|
||||||
description: 'List of class names used in the styled mode.',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getStyleOptions('TabMenu')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'theming.tokens',
|
|
||||||
label: 'Design Tokens',
|
|
||||||
description: 'List of design tokens used in a preset.',
|
|
||||||
component: DocApiTable,
|
|
||||||
data: getTokenOptions('TabMenu')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocComponent
|
|
||||||
title="Vue Stepper Component"
|
|
||||||
header="Steps"
|
|
||||||
description="Steps also known as Stepper, is an indicator for the steps in a workflow."
|
|
||||||
:componentDocs="docs"
|
|
||||||
:apiDocs="['Steps', 'MenuItem']"
|
|
||||||
:ptTabComponent="ptComponent"
|
|
||||||
:themingDocs="themingDoc"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AccessibilityDoc from '@/doc/steps/AccessibilityDoc.vue';
|
|
||||||
import BasicDoc from '@/doc/steps/BasicDoc.vue';
|
|
||||||
import ControlledDoc from '@/doc/steps/ControlledDoc.vue';
|
|
||||||
import ImportDoc from '@/doc/steps/ImportDoc.vue';
|
|
||||||
import LinearDoc from '@/doc/steps/LinearDoc.vue';
|
|
||||||
import TemplateDoc from '@/doc/steps/TemplateDoc.vue';
|
|
||||||
import PTComponent from '@/doc/steps/pt/index.vue';
|
|
||||||
import ThemingDoc from '@/doc/steps/theming/index.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'import',
|
|
||||||
label: 'Import',
|
|
||||||
component: ImportDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'basic',
|
|
||||||
label: 'Basic',
|
|
||||||
component: BasicDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'controlled',
|
|
||||||
label: 'Controlled',
|
|
||||||
component: ControlledDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'linear',
|
|
||||||
label: 'Linear',
|
|
||||||
component: LinearDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'template',
|
|
||||||
label: 'Template',
|
|
||||||
component: TemplateDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'accessibility',
|
|
||||||
label: 'Accessibility',
|
|
||||||
component: AccessibilityDoc
|
|
||||||
}
|
|
||||||
],
|
|
||||||
ptComponent: PTComponent,
|
|
||||||
themingDoc: ThemingDoc
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocComponent
|
|
||||||
title="Vue TabMenu Component"
|
|
||||||
header="TabMenu"
|
|
||||||
description="TabMenu is a navigation component displaying menu items as tabs."
|
|
||||||
:componentDocs="docs"
|
|
||||||
:apiDocs="['TabMenu', 'MenuItem']"
|
|
||||||
:ptTabComponent="ptComponent"
|
|
||||||
:themingDocs="themingDoc"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AccessibilityDoc from '@/doc/tabmenu/AccessibilityDoc.vue';
|
|
||||||
import BasicDoc from '@/doc/tabmenu/BasicDoc.vue';
|
|
||||||
import ControlledDoc from '@/doc/tabmenu/ControlledDoc.vue';
|
|
||||||
import ImportDoc from '@/doc/tabmenu/ImportDoc.vue';
|
|
||||||
import RouterDoc from '@/doc/tabmenu/RouterDoc.vue';
|
|
||||||
import CommandDoc from '@/doc/tabmenu/CommandDoc.vue';
|
|
||||||
import TemplateDoc from '@/doc/tabmenu/TemplateDoc.vue';
|
|
||||||
import PTComponent from '@/doc/tabmenu/pt/index.vue';
|
|
||||||
import ThemingDoc from '@/doc/tabmenu/theming/index.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
docs: [
|
|
||||||
{
|
|
||||||
id: 'import',
|
|
||||||
label: 'Import',
|
|
||||||
component: ImportDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'basic',
|
|
||||||
label: 'Basic',
|
|
||||||
component: BasicDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'controlled',
|
|
||||||
label: 'Controlled',
|
|
||||||
component: ControlledDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'template',
|
|
||||||
label: 'Template',
|
|
||||||
component: TemplateDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'command',
|
|
||||||
label: 'Command',
|
|
||||||
component: CommandDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'router',
|
|
||||||
label: 'Router',
|
|
||||||
component: RouterDoc
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'accessibility',
|
|
||||||
label: 'Accessibility',
|
|
||||||
component: AccessibilityDoc
|
|
||||||
}
|
|
||||||
],
|
|
||||||
ptComponent: PTComponent,
|
|
||||||
themingDoc: ThemingDoc
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue