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: { code: {
basic: ` 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: ` options: `
<template> <template>
<div class="card"> <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> </div>
</template> </template>
@ -52,10 +78,15 @@ export default {
data() { data() {
return { return {
items: [ items: [
{ label: 'Dashboard', icon: 'pi pi-home' }, { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{ label: 'Transactions', icon: 'pi pi-chart-line' }, {
{ label: 'Products', icon: 'pi pi-list' }, label: 'Programmatic',
{ label: 'Messages', icon: 'pi pi-inbox' } 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: ` composition: `
<template> <template>
<div class="card"> <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> </div>
</template> </template>
@ -73,10 +117,15 @@ export default {
import { ref } from "vue"; import { ref } from "vue";
const items = ref([ const items = ref([
{ label: 'Dashboard', icon: 'pi pi-home' }, { { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
{ label: 'Transactions', icon: 'pi pi-chart-line' }, {
{ label: 'Products', icon: 'pi pi-list' }, label: 'Programmatic',
{ label: 'Messages', icon: 'pi pi-inbox' } icon: 'pi pi-palette',
command: () => {
this.$router.push('/unstyled');
}
},
{ label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
]); ]);
<\/script> <\/script>
` `