vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 09:52:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Menu router demo updates

Browse source
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

50
doc/tieredmenu/RouterDoc.vue
View file

@ -9,7 +9,7 @@
<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">
<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>
@ -162,12 +162,40 @@ export default {
],
code: {
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: `
<template>
<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>
</template>
@ -314,7 +342,21 @@ export default {
composition: `
<template>
<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>
</template>