csb updated for menu components
Tuğçe Küçükoğlu
parent
ef8133e5e9
commit
a4f3c9a4a0
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="BreadcrumbDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
|
|
@ -98,57 +96,21 @@ export default {
|
|||
|
||||
<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>
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</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>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Breadcrumb :home="home" :model="items" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -168,13 +130,44 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="ContextMenuDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import ContextMenu from 'primevue/contextmenu';
|
||||
|
|
@ -305,187 +303,22 @@ export default {
|
|||
|
||||
<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>
|
||||
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
|
||||
<ContextMenu ref="menu" :model="items" />
|
||||
</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>
|
||||
</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">
|
||||
'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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -630,13 +463,166 @@ export default {
|
|||
this.$refs.menu.show(event);
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="MegaMenuDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import MegaMenu from 'primevue/megamenu';
|
||||
|
|
@ -244,168 +242,18 @@ export default {
|
|||
|
||||
<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>
|
||||
<h3>Horizontal</h3>
|
||||
<MegaMenu :model="items" />
|
||||
|
||||
<h3>Vertical</h3>
|
||||
<MegaMenu :model="items" orientation="vertical"/>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<MegaMenu :model="items" />
|
||||
|
|
@ -413,8 +261,6 @@ export default {
|
|||
<h5>Vertical</h5>
|
||||
<MegaMenu :model="items" orientation="vertical"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -535,13 +381,149 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="MenuDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Menu from 'primevue/menu';
|
||||
|
|
@ -203,91 +201,21 @@ toggle(event) {
|
|||
|
||||
<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>
|
||||
<h3>Inline</h3>
|
||||
<Menu :model="items" />
|
||||
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
|
||||
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
|
||||
</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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<Toast />
|
||||
<div class="content-section implementation">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Toast />
|
||||
|
||||
<h5>Inline</h5>
|
||||
<Menu :model="items" />
|
||||
|
||||
|
|
@ -295,8 +223,6 @@ export default {
|
|||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -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});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
{
|
||||
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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="MenubarDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import Menubar from 'primevue/menubar';
|
||||
|
|
@ -260,180 +258,18 @@ export default {
|
|||
|
||||
<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>
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2">
|
||||
</template>
|
||||
<template #end>
|
||||
<InputText placeholder="Search" type="text" />
|
||||
<Button label="Logout" icon="pi pi-power-off" :style="{'margin-left': '0 .5em'}"/>
|
||||
</template>
|
||||
</Menubar>
|
||||
</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>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
|
|
@ -444,8 +280,6 @@ export default {
|
|||
</template>
|
||||
</Menubar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -582,13 +416,163 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="PanelMenuDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import PanelMenu from 'primevue/panelmenu';
|
||||
|
|
@ -217,166 +215,21 @@ export default {
|
|||
|
||||
<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>
|
||||
<PanelMenu :model="items" />
|
||||
</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>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<PanelMenu :model="items" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -502,18 +355,161 @@ export default {
|
|||
]
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style scoped lang="scss">
|
||||
}
|
||||
<\\/script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.p-panelmenu {
|
||||
width: 22rem;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="TabMenuDemo" :sources="sources" :extPages="pages">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import TabMenu from 'primevue/tabmenu';
|
||||
|
|
@ -100,58 +98,22 @@ export default {
|
|||
|
||||
<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>
|
||||
<TabMenu :model="items" />
|
||||
<router-view />
|
||||
</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>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<TabMenu :model="items" />
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -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([
|
||||
{
|
||||
'name': 'HomeDemo',
|
||||
'template': `<template>
|
||||
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: [
|
||||
{
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<AppDoc name="TieredMenuDemo" :sources="sources">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script><code>
|
||||
import TieredMenu from 'primevue/tieredmenu';
|
||||
|
|
@ -294,185 +292,18 @@ toggle(event) {
|
|||
|
||||
<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>
|
||||
<h3>Inline</h3>
|
||||
<TieredMenu :model="items" />
|
||||
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
|
||||
<TieredMenu id="overlay_tmenu" ref="menu" :model="items" :popup="true" />
|
||||
</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>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<TieredMenu :model="items" />
|
||||
|
|
@ -481,8 +312,6 @@ export default {
|
|||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -627,13 +456,169 @@ export default {
|
|||
this.$refs.menu.toggle(event);
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>`
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue