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

Add tabmenu demo to tabs

pull/5806/head
Cagatay Civici 2024-05-29 09:37:07 +03:00
parent 4677c6041b
commit 403be52a70
3 changed files with 112 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -369,10 +369,6 @@
"name": "Steps",
"to": "/steps"
},
{
"name": "TabMenu",
"to": "/tabmenu"
},
{
"name": "TieredMenu",
"to": "/tieredmenu"

106
doc/tabs/TabMenuDoc.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like
<a href="https://router.vuejs.org/guide/essentials/nested-routes#Nested-Named-Routes" target="_blank" rel="noopener noreferrer">router-view</a>. For the purpose of this demo, <i>router-view</i> is not included.
</p>
</DocSectionText>
<div class="card">
<Tabs value="/dashboard">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route" as="div" class="flex items-center gap-2">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</Tab>
</TabList>
</Tabs>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
items: [
{ route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
{ route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
{ route: '/products', label: 'Products', icon: 'pi pi-list' },
{ route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
],
code: {
basic: `
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
`,
options: `
<template>
<div class="card">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
{ route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
{ route: '/products', label: 'Products', icon: 'pi pi-list' },
{ route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
]
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card">
<TabList>
<Tab v-for="tab in items" :key="tab.label" :value="tab.route">
<router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
<a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
<i :class="tab.icon" />
<span>{{ tab.label }}</span>
</a>
</router-link>
</Tab>
</TabList>
</div>
</template>
<script setup>
import { ref } from "vue";
const items = ref([
{ route: '/dashboard', label: 'Dashboard', icon: 'pi pi-home' },
{ route: '/transactions', label: 'Transactions', icon: 'pi pi-chart-line' },
{ route: '/products', label: 'Products', icon: 'pi pi-list' },
{ route: '/messages', label: 'Messages', icon: 'pi pi-inbox' }
]);
<\/script>
`
}
};
}
};
</script>

6
pages/tabs/index.vue
View File

@ -18,6 +18,7 @@ import DisabledDoc from '@/doc/tabs/DisabledDoc.vue';
import DynamicDoc from '@/doc/tabs/DynamicDoc.vue';
import ImportDoc from '@/doc/tabs/ImportDoc.vue';
import ScrollableDoc from '@/doc/tabs/ScrollableDoc.vue';
import TabMenuDoc from '@/doc/tabs/TabMenuDoc.vue';
import TemplateDoc from '@/doc/tabs/TemplateDoc.vue';
import PTComponent from '@/doc/tabs/pt/index.vue';
import ThemingDoc from '@/doc/tabs/theming/index.vue';
@ -61,6 +62,11 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'tabmenu',
label: 'TabMenu',
component: TabMenuDoc
},
{
id: 'accessibility',
label: 'Accessibility',