73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<Head>
|
||
|
|
<Title>Vue TabMenu Component</Title>
|
||
|
|
<Meta name="description" content="TabMenu is a navigation/command component that displays items as tab headers." />
|
||
|
|
</Head>
|
||
|
|
|
||
|
|
<div class="content-section introduction">
|
||
|
|
<div class="feature-intro">
|
||
|
|
<h1>TabMenu</h1>
|
||
|
|
<p>TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu.</p>
|
||
|
|
</div>
|
||
|
|
<AppDemoActions />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-section implementation">
|
||
|
|
<div class="card">
|
||
|
|
<h5>Default</h5>
|
||
|
|
<TabMenu :model="items" />
|
||
|
|
<NuxtPage />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h5>Programmatic</h5>
|
||
|
|
<div class="py-2">
|
||
|
|
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||
|
|
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
||
|
|
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<TabMenu v-model:activeIndex="active" :model="items2" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<TabMenuDoc />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TabMenuDoc from './tabmenu/TabMenuDoc';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
active: 3,
|
||
|
|
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' }
|
||
|
|
],
|
||
|
|
items2: [
|
||
|
|
{ label: 'Home', icon: 'pi pi-fw pi-home' },
|
||
|
|
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar' },
|
||
|
|
{ label: 'Edit', icon: 'pi pi-fw pi-pencil' },
|
||
|
|
{ label: 'Documentation', icon: 'pi pi-fw pi-file' },
|
||
|
|
{ label: 'Settings', icon: 'pi pi-fw pi-cog' }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
TabMenuDoc: TabMenuDoc
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::v-deep(.tabmenudemo-content) {
|
||
|
|
padding: 2rem 1rem;
|
||
|
|
}
|
||
|
|
</style>
|