197 lines
6.9 KiB
Vue
Executable File
197 lines
6.9 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="content-section documentation">
|
|
<h1>MenuModel</h1>
|
|
<p>PrimeVue menu components share a common api to specify the menuitems and submenus.</p>
|
|
|
|
<h1>Router</h1>
|
|
<p>Menu components require <a href="https://router.vuejs.org">Vue-Router</a> as a dependency so make sure the router is installed in your application.</p>
|
|
|
|
<h5>MenuItem</h5>
|
|
<p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
|
|
<pre v-code.script><code>
|
|
const items: [
|
|
{
|
|
label: 'Options',
|
|
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
|
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
|
},
|
|
{
|
|
label: 'Account',
|
|
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
|
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
|
}
|
|
];
|
|
|
|
</code></pre>
|
|
|
|
<p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu 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>label</td>
|
|
<td>string | function</td>
|
|
<td>null</td>
|
|
<td>Property name or getter function to use as the label of an item.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>icon</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Icon of the item.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>to</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Route configuration such as path, name and parameters.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>command</td>
|
|
<td>function</td>
|
|
<td>null</td>
|
|
<td>Callback to execute when item is clicked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>url</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>External link to navigate when item is clicked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>items</td>
|
|
<td>array</td>
|
|
<td>null</td>
|
|
<td>An array of children menuitems.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean/function</td>
|
|
<td>false</td>
|
|
<td>A boolean or a function to return a boolean to specify if the item is disabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>visible</td>
|
|
<td>boolean/function</td>
|
|
<td>true</td>
|
|
<td>A boolean or a function to return a boolean to specify if the item is visible.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>target</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Specifies where to open the linked document.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>separator</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Defines the item as a separator.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>style</td>
|
|
<td>object</td>
|
|
<td>null</td>
|
|
<td>Inline style of the menuitem.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>class</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the menuitem.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>key</td>
|
|
<td>object</td>
|
|
<td>null</td>
|
|
<td>Unique identifier of an item.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Command</h5>
|
|
<p>The function to invoke when an item is clicked is defined using the command property.</p>
|
|
<pre v-code.script><code>
|
|
const items = [
|
|
{
|
|
label: 'New',
|
|
icon: 'pi pi-plus',
|
|
command: (event) => {
|
|
// event.originalEvent: Browser event
|
|
// event.item: Menuitem instance
|
|
}
|
|
}
|
|
];
|
|
|
|
</code></pre>
|
|
|
|
<h5>Navigation</h5>
|
|
<p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
|
|
<pre v-code.script><code>
|
|
const items = [
|
|
{
|
|
label: 'Route Path',
|
|
icon: 'pi pi-plus',
|
|
to: '/fileupload'
|
|
},
|
|
{
|
|
label: 'Named Route',
|
|
icon: 'pi pi-plus',
|
|
to: {name: 'fileupload'}
|
|
},
|
|
{
|
|
label: 'External',
|
|
icon: 'pi pi-check',
|
|
url: 'https://www.primefaces.org/primevue'
|
|
}
|
|
];
|
|
|
|
</code></pre>
|
|
|
|
<h5>Visibility</h5>
|
|
<p>It is a common case to hide certain items based on conditions such as user roles, <i>visible</i> property is available to implement such cases by supporting functions that returns booleans or simple booleans.</p>
|
|
<pre v-code.script><code>
|
|
const items = [
|
|
{
|
|
label: 'Remove',
|
|
visible: false
|
|
},
|
|
{
|
|
label: 'Delete',
|
|
visible: () => this.isUserAdmin()
|
|
}
|
|
];
|
|
|
|
</code></pre>
|
|
|
|
<h5>Separator</h5>
|
|
<p>Separators are special menuitems whose sole purpose is to divide menuitems. A separator is simply configured as below.</p>
|
|
<pre v-code.script><code>
|
|
const items = [
|
|
{
|
|
label: 'Item 1'
|
|
},
|
|
{
|
|
separator: true
|
|
},
|
|
{
|
|
label: 'Item 2'
|
|
}
|
|
];
|
|
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</template>
|