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

csb updated for menu components

pull/1143/head
Tuğçe Küçükoğlu 2021-03-23 10:47:00 +03:00
parent ef8133e5e9
commit a4f3c9a4a0
9 changed files with 1975 additions and 1944 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
src/views/breadcrumb/BreadcrumbDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="BreadcrumbDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb';
</code></pre>
<h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>Breadcrumb uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<h5>Getting Started</h5>
<p>Breadcrumb requires a collection of menuitems as its model and a home item.</p>
<pre v-code><code>
&lt;Breadcrumb :home="home" :model="items" /&gt;
@ -36,118 +34,82 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>home</td>
<td>menuitem</td>
<td>null</td>
<td>Configuration for the home icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>home</td>
<td>menuitem</td>
<td>null</td>
<td>Configuration for the home icon.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-breadcrumb</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-breadcrumb-chevron</td>
<td>Chevron element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-breadcrumb</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-breadcrumb-chevron</td>
<td>Chevron element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="BreadcrumbDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;Breadcrumb :home="home" :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
home: {icon: 'pi pi-home', to: '/'},
items: [
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</template>
@ -168,13 +130,44 @@ export default {
]
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Breadcrumb :home="home" :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const home = ref({
icon: 'pi pi-home',
to: '/fileupload',
});
const items = ref([
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]);
return { home, items }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

604
src/views/contextmenu/ContextMenuDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="ContextMenuDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import ContextMenu from 'primevue/contextmenu';
</code></pre>
<h5>MenuModel</h5>
<p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>ContextMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>ContextMenu requires a collection of menuitems as its model.</p>
<pre v-code.script><code>
export default {
@ -155,15 +153,15 @@ export default {
</code></pre>
<h5>Document Menu</h5>
<p>Setting global property attaches the context menu to the document.</p>
<h5>Document Menu</h5>
<p>Setting global property attaches the context menu to the document.</p>
<pre v-code><code>
&lt;ContextMenu :global="true" :model="items" /&gt;
</code></pre>
<h5>Element Menu</h5>
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<h5>Element Menu</h5>
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<pre v-code><code>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
@ -187,304 +185,139 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>global</td>
<td>boolean</td>
<td>false</td>
<td>Attaches the menu to document instead of a particular item.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
<tr>
<td>global</td>
<td>boolean</td>
<td>false</td>
<td>Attaches the menu to document instead of a particular item.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the menu.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event</td>
<td>Shows the menu.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the menu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the menu.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event</td>
<td>Shows the menu.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the menu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-contextmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-contextmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/contextmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="ContextMenuDemo" :sources="sources" />
</div>
<pre v-code><code><template v-pre>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</div>
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</template>
@ -630,13 +463,166 @@ export default {
this.$refs.menu.show(event);
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menu = ref();
const items = ref([
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
const onImageRightClick = (event) => {
menu.value.show(event);
};
return { menu, items, onImageRightClick }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
}
}
</script>

510
src/views/megamenu/MegaMenuDoc.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="MegaMenuDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import MegaMenu from 'primevue/megamenu';
</code></pre>
<h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<pre v-code><code>
&lt;MegaMenu :model="items" /&gt;
@ -137,15 +135,15 @@ export default {
</code></pre>
<h5>Orientation</h5>
<p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
<h5>Orientation</h5>
<p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
<pre v-code><code>
&lt;MegaMenu :model="items" orientation="vertical" /&gt;
</code></pre>
<h5>Custom Content</h5>
<p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.</p>
<h5>Custom Content</h5>
<p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.</p>
<pre v-code><code><template v-pre>
&lt;MegaMenu :model="items"&gt;
&lt;InputText placeholder="Search" type="text" /&gt;
@ -154,266 +152,114 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Defines the orientation, valid values are horizontal and vertical.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>orientation</td>
<td>string</td>
<td>horizontal</td>
<td>Defines the orientation, valid values are horizontal and vertical.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-megamenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-megamenu-horizontal</td>
<td>Container element in horizontal orientation.</td>
</tr>
<tr>
<td>p-megamenu-vertical</td>
<td>Container element in vertical orientation.</td>
</tr>
<tr>
<td>p-megamenu-root-list</td>
<td>Root list element.</td>
</tr>
<tr>
<td>p-megamenu-panel</td>
<td>Submenu container.</td>
</tr>
<tr>
<td>p-megamenu-submenu</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
<tr>
<td>p-megamenu-custom</td>
<td>Container of the default slot.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-megamenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-megamenu-horizontal</td>
<td>Container element in horizontal orientation.</td>
</tr>
<tr>
<td>p-megamenu-vertical</td>
<td>Container element in vertical orientation.</td>
</tr>
<tr>
<td>p-megamenu-root-list</td>
<td>Root list element.</td>
</tr>
<tr>
<td>p-megamenu-panel</td>
<td>Submenu container.</td>
</tr>
<tr>
<td>p-megamenu-submenu</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
<tr>
<td>p-megamenu-custom</td>
<td>Container of the default slot.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/megamenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MegaMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;MegaMenu :model="items" /&gt;
&lt;h3&gt;Vertical&lt;/h3&gt;
&lt;MegaMenu :model="items" orientation="vertical"/&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label: 'Videos', icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
},
{
label: 'Video 2',
items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
}
],
[
{
label: 'Video 3',
items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
},
{
label: 'Video 4',
items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
}
]
]
},
{
label: 'Users', icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
},
{
label: 'User 2',
items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
},
],
[
{
label: 'User 3',
items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
},
{
label: 'User 4',
items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
}
],
[
{
label: 'User 5',
items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
},
{
label: 'User 6',
items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
}
]
]
},
{
label: 'Events', icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
},
{
label: 'Event 2',
items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
}
],
[
{
label: 'Event 3',
items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
},
{
label: 'Event 4',
items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
}
]
]
},
{
label: 'Settings', icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
},
{
label: 'Setting 2',
items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
},
{
label: 'Setting 3',
items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
}
],
[
{
label: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section introduction">
<div class="feature-intro">
<h1>MegaMenu</h1>
<p>MegaMenu is navigation component that displays submenus together.</p>
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<div class="content-section implementation">
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</div>
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</template>
@ -535,13 +381,149 @@ export default {
]
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Horizontal</h5>
<MegaMenu :model="items" />
<h5>Vertical</h5>
<MegaMenu :model="items" orientation="vertical"/>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([
{
label: 'Videos', icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
},
{
label: 'Video 2',
items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
}
],
[
{
label: 'Video 3',
items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
},
{
label: 'Video 4',
items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
}
]
]
},
{
label: 'Users', icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
},
{
label: 'User 2',
items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
},
],
[
{
label: 'User 3',
items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
},
{
label: 'User 4',
items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
}
],
[
{
label: 'User 5',
items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
},
{
label: 'User 6',
items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
}
]
]
},
{
label: 'Events', icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
},
{
label: 'Event 2',
items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
}
],
[
{
label: 'Event 3',
items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
},
{
label: 'Event 4',
items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
}
]
]
},
{
label: 'Settings', icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
},
{
label: 'Setting 2',
items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
},
{
label: 'Setting 3',
items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
}
],
[
{
label: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]);
return { items }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

421
src/views/menu/MenuDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="MenuDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Menu from 'primevue/menu';
</code></pre>
<h5>MenuModel</h5>
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Menu requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>Menu requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;Menu :model="items" /&gt;
@ -54,8 +52,8 @@ export default {
</code></pre>
<h5>SubMenus</h5>
<p>Menu supports one level of nesting via subitems of an item.</p>
<h5>SubMenus</h5>
<p>Menu supports one level of nesting via subitems of an item.</p>
<pre v-code.script><code>
const items: [
{
@ -72,8 +70,8 @@ const items: [
</code></pre>
<h5>Popup Mode</h5>
<p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<h5>Popup Mode</h5>
<p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<pre v-code><code>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
@ -88,214 +86,142 @@ toggle(event) {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>popup</td>
<td>boolean</td>
<td>false</td>
<td>Defines if menu would displayed as a popup.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>popup</td>
<td>boolean</td>
<td>false</td>
<td>Defines if menu would displayed as a popup.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target would not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target would not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-menu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-menu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MenuDemo" :sources="sources" :toastService="true" :router="true" :components="['Button']"/>
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;Menu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /&gt;
&lt;Menu id="overlay_menu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label: 'Options',
items: [{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
}
]},
{
label: 'Navigate',
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
},
save() {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Toast />
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<Menu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
</div>
<h5>Inline</h5>
<Menu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
</template>
@ -347,13 +273,84 @@ export default {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Toast />
<h5>Inline</h5>
<Menu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu"/>
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
</div>
</template>
<script>
import { ref } from 'vue';
import { useToast } from 'primevue/usetoast';
export default {
setup() {
const toast = useToast();
const menu = ref();
const items = ref([
{
label: 'Options',
items: [{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
}
]},
{
label: 'Navigate',
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
]}
]);
const toggle = (event) => {
menu.value.toggle(event);
};
const save = () => {
toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
};
return { items, menu, toggle, save }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

552
src/views/menubar/MenubarDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="MenubarDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import Menubar from 'primevue/menubar';
</code></pre>
<h5>MenuModel</h5>
<p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>Menubar uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Menubar requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>Menubar requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;Menubar :model="items" /&gt;
@ -156,8 +154,8 @@ export default {
</code></pre>
<h5>Custom Content</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
<h5>Custom Content</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar.</p>
<pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt;
&lt;template #start&gt;
@ -170,281 +168,117 @@ export default {
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>-</td>
</tr>
<tr>
<td>end</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Slots</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
</tr>
</thead>
<tbody>
<tr>
<td>start</td>
<td>-</td>
</tr>
<tr>
<td>end</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-menubar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menubar-root-list</td>
<td>Root list element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-menubar</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menubar-root-list</td>
<td>Root list element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menubar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="MenubarDemo" :sources="sources" :router="true" :components="['InputText']"/>
</div>
<pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt;
&lt;template #start&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2"&gt;
&lt;/template&gt;
&lt;template #end&gt;
&lt;InputText placeholder="Search" type="text" /&gt;
&lt;Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '0 .5em'}"/&gt;
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</div>
data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</template>
@ -582,13 +416,163 @@ export default {
]
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
</template>
<template #end>
<InputText placeholder="Search" type="text" />
</template>
</Menubar>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
return { items }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
}
}
</script>

468
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="PanelMenuDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import PanelMenu from 'primevue/panelmenu';
</code></pre>
<h5>MenuModel</h5>
<p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>PanelMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>PanelMenu requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>PanelMenu requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;PanelMenu :model="items" /&gt;
@ -145,237 +143,92 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-panelmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-panelmenu-header</td>
<td>Accordion header of root submenu.</td>
</tr>
<tr>
<td>p-panelmenu-content</td>
<td>Accordion content of root submenu.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-panelmenu-icon</td>
<td>Arrow icon of an accordion header.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-panelmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-panelmenu-header</td>
<td>Accordion header of root submenu.</td>
</tr>
<tr>
<td>p-panelmenu-content</td>
<td>Accordion content of root submenu.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-panelmenu-icon</td>
<td>Arrow icon of an accordion header.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/panelmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="PanelMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;PanelMenu :model="items" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label: 'File',
icon:'pi pi-fw pi-file',
items: [
{
label: 'New',
icon:'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon:'pi pi-fw pi-trash'
},
{
label: 'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon:'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon:'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon:'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon:'pi pi-fw pi-user',
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon:'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon:'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon:'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon:'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<PanelMenu :model="items" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<PanelMenu :model="items" />
</div>
</template>
@ -502,18 +355,161 @@ export default {
]
}
}
}`,
style: `<style scoped lang="scss">
}
<\\/script>
<style scoped lang="scss">
.p-panelmenu {
width: 22rem;
}
</style>`
</style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<PanelMenu :model="items" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([
{
label: 'File',
icon:'pi pi-fw pi-file',
items: [
{
label: 'New',
icon:'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon:'pi pi-fw pi-trash'
},
{
label: 'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon:'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon:'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon:'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon:'pi pi-fw pi-user',
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon:'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon:'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon:'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon:'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
}
]);
return { items }
}
}
<\\/script>
<style scoped lang="scss">
.p-panelmenu {
width: 22rem;
}
</style>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

235
src/views/steps/StepsDoc.vue
View File

@ -6,11 +6,11 @@ import Steps from 'primevue/steps';
</code></pre>
<h5>MenuModel</h5>
<p>Steps uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>Steps uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>Steps is integrated with Vue Router and requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;Steps :model="items" /&gt;
&lt;router-view /&gt;
@ -43,82 +43,82 @@ export default {
</code></pre>
<h5>Interactive</h5>
<p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
<h5>Interactive</h5>
<p>Items are readonly by default, if you'd like to make them interactive then disable <i>readonly</i> property.</p>
<pre v-code><code>
&lt;Steps :model="items" :readonly="false" /&gt;
&lt;router-view /&gt;
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>true</td>
<td>Whether the items are clickable or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>true</td>
<td>Whether the items are clickable or not.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-steps</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-steps-item</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-steps-number</td>
<td>Number of menuitem.</td>
</tr>
<tr>
<td>p-steps-title</td>
<td>Label of menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-steps</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-steps-item</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-steps-number</td>
<td>Number of menuitem.</td>
</tr>
<tr>
<td>p-steps-title</td>
<td>Label of menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
@ -133,11 +133,13 @@ export default {
content: `
<template>
<div>
<Toast />
<div class="card">
<Steps :model="items" :readonly="true" />
</div>
<router-view v-slot="{Component}" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive>
<component :is="Component" />
</keep-alive>
@ -151,19 +153,19 @@ export default {
return {
items: [{
label: 'Personal',
to: '/steps'
to: '/'
},
{
label: 'Seat',
to: '/steps/seat'
to: '/seat'
},
{
label: 'Payment',
to: '/steps/payment'
to: '/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
to: '/confirmation'
}],
formObject: {}
}
@ -196,7 +198,84 @@ export default {
}
</style>
`
}
},
'composition-api': {
tabName: 'Composition API',
content: `<template>
<div>
<Toast />
<div class="card">
<Steps :model="items" :readonly="true" />
</div>
<router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
export default {
setup() {
const router = useRouter();
const toast = useToast();
const items = ref([
{
label: 'Personal',
to: "/"
},
{
label: 'Seat',
to: "/seat",
},
{
label: 'Payment',
to: "/payment",
},
{
label: 'Confirmation',
to: "/confirmation",
}
]);
const formObject = ref({});
const nextPage = (event) => {
for (let field in event.formData) {
formObject.value[field] = event.formData[field];
}
router.push(items.value[event.pageIndex + 1].to);
};
const prevPage = (event) => {
router.push(items.value[event.pageIndex - 1].to);
};
const complete = () => {
toast.add({severity:'success', summary:'Order submitted', detail: 'Dear, ' + formObject.value.firstname + ' ' + formObject.value.lastname + ' your order completed.'});
};
return { items, formObject, nextPage, prevPage, complete }
}
}
<\\/script>
<style scoped lang="scss">
::v-deep(b) {
display: block;
}
::v-deep(.p-card-body) {
padding: 2rem;
}
</style>
`
},
},
pages: [
{

301
src/views/tabmenu/TabMenuDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages">
<h5>Import</h5>
<pre v-code.script><code>
import TabMenu from 'primevue/tabmenu';
</code></pre>
<h5>MenuModel</h5>
<p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>TabMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;TabMenu :model="items" /&gt;
&lt;router-view /&gt;
@ -36,121 +34,85 @@ export default {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tabmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-tabmenu-nav</td>
<td>List element.</td>
</tr>
<tr>
<td>p-tabmenuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-highlight</td>
<td>Active menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Text of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tabmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-tabmenu-nav</td>
<td>List element.</td>
</tr>
<tr>
<td>p-tabmenuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-highlight</td>
<td>Active menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Text of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tabmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TabMenuDemo" :sources="sources" :router="true" />
</div>
<pre v-code><code><template v-pre>
&lt;TabMenu :model="items" /&gt;
&lt;router-view /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
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'}
]
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<TabMenu :model="items" />
<router-view />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<TabMenu :model="items" />
<router-view />
</div>
</template>
@ -187,17 +149,75 @@ export default {
]
}
}
}`,
style: `<style scoped lang="scss">
}
<\\/script>
<style scoped lang="scss">
::v-deep(.tabmenudemo-content) {
padding: 2rem 1rem;
}
</style>`
},
'pages': [
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<TabMenu :model="items" />
<router-view />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([
{
label: 'Home',
icon: 'pi pi-fw pi-home',
to: '/'
},
{
label: 'Calendar',
icon: 'pi pi-fw pi-calendar',
to: '/calendar'
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
to: '/edit'
},
{
label: 'Documentation',
icon: 'pi pi-fw pi-file',
to: '/documentation'
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
to: '/settings'
}
]);
return { items }
}
}
<\\/script>
<style scoped lang="scss">
::v-deep(.tabmenudemo-content) {
padding: 2rem 1rem;
}
</style>`
}
},
pages: [
{
'name': 'HomeDemo',
'template': `<template>
tabName: 'HomeDemo',
content: `
<template>
<div class="tabmenudemo-content">
<h5>Home Component Content</h5>
</div>
@ -206,11 +226,14 @@ export default {
<script>
export default {
}`
}
<\\/script>
`
},
{
'name': 'CalendarDemo',
'template': `<template>
tabName: 'CalendarDemo',
content: `
<template>
<div class="tabmenudemo-content">
<h5>Calendar Component Content</h5>
</div>
@ -219,11 +242,14 @@ export default {
<script>
export default {
}`
}
<\\/script>
`
},
{
'name': 'EditDemo',
'template': `<template>
tabName: 'EditDemo',
content: `
<template>
<div class="tabmenudemo-content">
<h5>Edit Component Content</h5>
</div>
@ -232,11 +258,14 @@ export default {
<script>
export default {
}`
}
<\\/script>
`
},
{
'name': 'DocumentationDemo',
'template': `<template>
tabName: 'DocumentationDemo',
content: `
<template>
<div class="tabmenudemo-content">
<h5>Documentation Component Content</h5>
</div>
@ -245,11 +274,14 @@ export default {
<script>
export default {
}`
}
<\\/script>
`
},
{
'name': 'SettingsDemo',
'template': `<template>
tabName: 'SettingsDemo',
content: `
<template>
<div class="tabmenudemo-content">
<h5>Settings Component Content</h5>
</div>
@ -258,14 +290,11 @@ export default {
<script>
export default {
}`
}
<\\/script>`
}
]
}
}
},
components: {
LiveEditor
}
}
</script>

605
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -1,18 +1,16 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<AppDoc name="TieredMenuDemo" :sources="sources">
<h5>Import</h5>
<pre v-code.script><code>
import TieredMenu from 'primevue/tieredmenu';
</code></pre>
<h5>MenuModel</h5>
<p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>MenuModel</h5>
<p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>TieredMenu requires a collection of menuitems as its model.</p>
<h5>Getting Started</h5>
<p>TieredMenu requires a collection of menuitems as its model.</p>
<pre v-code><code>
&lt;TieredMenu :model="items" /&gt;
@ -159,8 +157,8 @@ export default {
</code></pre>
<h5>Popup Mode</h5>
<p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<h5>Popup Mode</h5>
<p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
<pre v-code><code>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
@ -175,313 +173,144 @@ toggle(event) {
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>popup</td>
<td>boolean</td>
<td>false</td>
<td>Defines if menu would displayed as a popup.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>model</td>
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>popup</td>
<td>boolean</td>
<td>false</td>
<td>Defines if menu would displayed as a popup.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>body</td>
<td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
</tr>
<tr>
<td>baseZIndex</td>
<td>number</td>
<td>0</td>
<td>Base zIndex value to use in layering.</td>
</tr>
<tr>
<td>autoZIndex</td>
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target would not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Methods</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visibility of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>event: Browser event <br />
target: Optional target if event.target would not be used</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tieredmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tieredmenu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-submenu-list</td>
<td>Submenu list element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-submenu-icon</td>
<td>Arrow icon of a submenu.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<LiveEditor name="TieredMenuDemo" :sources="sources" :router="true" :components="['Button']" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Inline&lt;/h3&gt;
&lt;TieredMenu :model="items" /&gt;
&lt;h3&gt;Overlay&lt;/h3&gt;
&lt;Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" /&gt;
&lt;TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
items: [
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<TieredMenu :model="items" />
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<h5>Inline</h5>
<TieredMenu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
</div>
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
</template>
@ -627,13 +456,169 @@ export default {
this.$refs.menu.toggle(event);
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<h5>Inline</h5>
<TieredMenu :model="items" />
<h5>Overlay</h5>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu"/>
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const menu = ref();
const items = ref([
{
label:'File',
icon:'pi pi-fw pi-file',
items:[
{
label:'New',
icon:'pi pi-fw pi-plus',
items:[
{
label:'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label:'Video',
icon:'pi pi-fw pi-video'
},
]
},
{
label:'Delete',
icon:'pi pi-fw pi-trash'
},
{
separator:true
},
{
label:'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Left',
icon:'pi pi-fw pi-align-left'
},
{
label:'Right',
icon:'pi pi-fw pi-align-right'
},
{
label:'Center',
icon:'pi pi-fw pi-align-center'
},
{
label:'Justify',
icon:'pi pi-fw pi-align-justify'
},
]
},
{
label:'Users',
icon:'pi pi-fw pi-user',
items:[
{
label:'New',
icon:'pi pi-fw pi-user-plus',
},
{
label:'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label:'Search',
icon:'pi pi-fw pi-users',
items:[
{
label:'Filter',
icon:'pi pi-fw pi-filter',
items:[
{
label:'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label:'List'
}
]
}
]
},
{
label:'Events',
icon:'pi pi-fw pi-calendar',
items:[
{
label:'Edit',
icon:'pi pi-fw pi-pencil',
items:[
{
label:'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label:'Delete',
icon:'pi pi-fw pi-calendar-minus'
},
]
},
{
label:'Archieve',
icon:'pi pi-fw pi-calendar-times',
items:[
{
label:'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]);
const toggle = (event) => {
menu.value.toggle(event);
}
return { items, menu, toggle }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>