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

TabMenu router docs added

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-08-31 16:23:35 +03:00
parent ac970a7ce8
commit 9d4b52fe07
3 changed files with 390 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

112
doc/tabmenu/BasicDoc.vue
View file

@ -1,9 +1,18 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Steps requires a collection of menuitems as its <i>model</i>. TabMenu can be also integrated with Vue Router.</p>
<p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
</DocSectionText>
<div class="card">
<TabMenu :model="items" />
<TabMenu v-model:activeIndex="active" :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="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</TabMenu>
<router-view />
</div>
<DocSectionCode :code="code" />
@ -13,19 +22,38 @@
export default {
data() {
return {
active: 0,
items: [
{ label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
{ label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
{ label: 'Home', icon: 'pi pi-fw pi-home', route: '/tabmenu' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', route: '/tabmenu/calendar' },
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', route: '/tabmenu/edit' },
{ label: 'Documentation', icon: 'pi pi-fw pi-file', route: '/tabmenu/documentation' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog', route: '/tabmenu/settings' }
],
code: {
basic: `<TabMenu :model="items" />
basic: `<TabMenu v-model:activeIndex="active" :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="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</TabMenu>
<router-view />`,
options: `<template>
<div class="card">
<TabMenu :model="items" />
<TabMenu v-model:activeIndex="active" :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="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</TabMenu>
<router-view />
</div>
</template>
@ -34,75 +62,109 @@ export default {
export default {
data() {
return {
active: 0,
items: [
{
label: 'Home',
icon: 'pi pi-fw pi-home',
to: '/'
route: '/'
},
{
label: 'Calendar',
icon: 'pi pi-fw pi-calendar',
to: '/calendar'
route: '/calendar'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
to: '/edit'
route: '/edit'
},
{
label: 'Documentation',
icon: 'pi pi-fw pi-file',
to: '/documentation'
route: '/documentation'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
to: '/settings'
route: '/settings'
}
]
}
},
watch: {
$route() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
}
},
mounted() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
}
}
<\/script>`,
composition: `<template>
<div class="card">
<TabMenu :model="items" />
<TabMenu v-model:activeIndex="active" :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="($event) => routerProps.navigate($event)" @keydown.enter.space="($event) => routerProps.navigate($event)">
<span v-bind="props.icon" />
<span v-bind="props.label">{{ label }}</span>
</a>
</router-link>
</template>
</TabMenu>
<router-view />
</div>
</template>
<script setup>
import { ref } from "vue";
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const actvie = ref(0);
const items = ref([
{
label: 'Home',
icon: 'pi pi-fw pi-home',
to: '/'
route: '/'
},
{
label: 'Calendar',
icon: 'pi pi-fw pi-calendar',
to: '/calendar'
route: '/calendar'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
to: '/edit'
route: '/edit'
},
{
label: 'Documentation',
icon: 'pi pi-fw pi-file',
to: '/documentation'
route: '/documentation'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
to: '/settings'
route: '/settings'
}
]);
onMounted(() => {
active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
})
watch(
route,
() => {
active.value = items.value.findIndex((item) => route.path === router.resolve(item.route).path);
},
{ immediate: true }
);
<\/script>`,
pages: [
{
@ -187,6 +249,14 @@ export default {
]
}
};
},
watch: {
$route() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
}
},
mounted() {
this.active = this.items.findIndex((item) => this.$route.path === this.$router.resolve(item.route).path);
}
};
</script>