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

Fixed #5082 - [TabMenu] Router demo has the wrong code

pull/5098/head
tugcekucukoglu 2024-01-15 17:02:12 +03:00
parent ac8fedeccf
commit 134d061f41
1 changed files with 60 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
doc/tabmenu/RouterDoc.vue
View File

@ -38,12 +38,38 @@ export default {
],
code: {
basic: `
<TabMenu :model="items" />
<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" />
<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>
@ -52,10 +78,15 @@ 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' }
{ label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{
label: 'Programmatic',
icon: 'pi pi-palette',
command: () => {
this.$router.push('/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
]
}
}
@ -65,7 +96,20 @@ export default {
composition: `
<template>
<div class="card">
<TabMenu :model="items" />
<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>
@ -73,10 +117,15 @@ export default {
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' }
{ { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{
label: 'Programmatic',
icon: 'pi pi-palette',
command: () => {
this.$router.push('/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
]);
<\/script>
`