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

Menu router demo updates

pull/4628/head
Tuğçe Küçükoğlu 2023-10-16 18:12:36 +03:00
parent 3418204383
commit dd62fbd753
5 changed files with 99 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
doc/contextmenu/RouterDoc.vue
View File

@ -10,7 +10,7 @@
<ContextMenu ref="routemenu" :model="items"> <ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }"> <template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -42,13 +42,39 @@ export default {
code: { code: {
basic: ` basic: `
<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" /> <img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" /> <ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
`, `,
options: ` options: `
<template> <template>
<div class="card flex md:justify-content-center"> <div class="card flex md:justify-content-center">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" /> <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" /> <ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
</div> </div>
</template> </template>
@ -79,7 +105,20 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" /> <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
<ContextMenu ref="routemenu" :model="items" /> <ContextMenu ref="routemenu" :model="items">
<template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</template>
</ContextMenu>
</div> </div>
</template> </template>

8
doc/megamenu/RouterDoc.vue
View File

@ -9,7 +9,7 @@
<MegaMenu :model="items"> <MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }"> <template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -155,7 +155,7 @@ export default {
<MegaMenu :model="items"> <MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }"> <template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -174,7 +174,7 @@ export default {
<MegaMenu :model="items"> <MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }"> <template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -325,7 +325,7 @@ export default {
<MegaMenu :model="items"> <MegaMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }"> <template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>

4
doc/menu/RouterDoc.vue
View File

@ -70,7 +70,7 @@ export default {
<Menu :model="items"> <Menu :model="items">
<template #item="{ label, item, props }"> <template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -88,7 +88,7 @@ export default {
<Menu :model="items"> <Menu :model="items">
<template #item="{ label, item, props }"> <template #item="{ label, item, props }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>

8
doc/menubar/RouterDoc.vue
View File

@ -9,7 +9,7 @@
<Menubar :model="items"> <Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }"> <template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -162,7 +162,7 @@ export default {
<Menubar :model="items"> <Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }"> <template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -181,7 +181,7 @@ export default {
<Menubar :model="items"> <Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }"> <template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -339,7 +339,7 @@ export default {
<Menubar :model="items"> <Menubar :model="items">
<template #item="{ label, item, props, root, hasSubmenu }"> <template #item="{ label, item, props, root, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="routerProps.navigate">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>

50
doc/tieredmenu/RouterDoc.vue
View File

@ -9,7 +9,7 @@
<TieredMenu :model="items"> <TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }"> <template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom> <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action"> <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" /> <span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span> <span v-bind="props.label">{{ label }}</span>
</a> </a>
@ -162,12 +162,40 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<TieredMenu :model="items" /> <TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TieredMenu :model="items" /> <TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
</div> </div>
</template> </template>
@ -314,7 +342,21 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<TieredMenu :model="items" /> <TieredMenu :model="items">
<template #item="{ label, item, props, hasSubmenu }">
<router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
<a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
<a v-else :href="item.url" :target="item.target" v-bind="props.action">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
<span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
</a>
</template>
</TieredMenu>
</div> </div>
</template> </template>