MegaMenu, Menu, Menubar unstyled demo updates
Tuğçe Küçükoğlu
parent
8217453189
commit
68d29dc847
|
|
@ -0,0 +1,260 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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: 'Technology 4',
|
||||||
|
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<MegaMenu :model="items" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
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: 'Technology 4',
|
||||||
|
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>MegaMenu Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [
|
||||||
|
{ label: 'New', icon: 'pi pi-fw pi-plus' },
|
||||||
|
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
|
||||||
|
],
|
||||||
|
code: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex justify-center">
|
||||||
|
<Menu :model="items" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const items = ref([
|
||||||
|
{ label: 'New', icon: 'pi pi-fw pi-plus' },
|
||||||
|
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Menu Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" embedded />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
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: {
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card relative z-2">
|
||||||
|
<Menubar :model="items" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
<\/script>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Menubar Theming</h1>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import StyledDoc from './StyledDoc.vue';
|
||||||
|
import UnstyledDoc from './UnstyledDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'styled',
|
||||||
|
label: 'Styled',
|
||||||
|
component: StyledDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'unstyled',
|
||||||
|
label: 'Unstyled',
|
||||||
|
component: UnstyledDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,15 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue MegaMenu Component" header="MegaMenu" description="MegaMenu is navigation component that displays submenus together." :componentDocs="docs" :apiDocs="['MegaMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue MegaMenu Component"
|
||||||
|
header="MegaMenu"
|
||||||
|
description="MegaMenu is navigation component that displays submenus together."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['MegaMenu', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/megamenu/BasicDoc';
|
import BasicDoc from '@/doc/megamenu/BasicDoc';
|
||||||
import ImportDoc from '@/doc/megamenu/ImportDoc';
|
import ImportDoc from '@/doc/megamenu/ImportDoc';
|
||||||
import StyleDoc from '@/doc/megamenu/StyleDoc';
|
|
||||||
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
|
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
|
||||||
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
|
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
|
||||||
import PTComponent from '@/doc/megamenu/pt/index.vue';
|
import PTComponent from '@/doc/megamenu/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/megamenu/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -35,18 +43,14 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue Menu Component" header="Menu" description="Menu is a navigation/command component that supports dynamic and static positioning." :componentDocs="docs" :apiDocs="['Menu', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue Menu Component"
|
||||||
|
header="Menu"
|
||||||
|
description="Menu is a navigation/command component that supports dynamic and static positioning."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['Menu', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -8,9 +16,9 @@ import BasicDoc from '@/doc/menu/BasicDoc';
|
||||||
import GroupDoc from '@/doc/menu/GroupDoc';
|
import GroupDoc from '@/doc/menu/GroupDoc';
|
||||||
import ImportDoc from '@/doc/menu/ImportDoc';
|
import ImportDoc from '@/doc/menu/ImportDoc';
|
||||||
import PopupDoc from '@/doc/menu/PopupDoc';
|
import PopupDoc from '@/doc/menu/PopupDoc';
|
||||||
import StyleDoc from '@/doc/menu/StyleDoc';
|
|
||||||
import TemplateDoc from '@/doc/menu/TemplateDoc';
|
import TemplateDoc from '@/doc/menu/TemplateDoc';
|
||||||
import PTComponent from '@/doc/menu/pt/index.vue';
|
import PTComponent from '@/doc/menu/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/menu/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -41,18 +49,14 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<DocComponent title="Vue Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component." :componentDocs="docs" :apiDocs="['Menubar', 'MenuItem']" :ptTabComponent="ptComponent" />
|
<DocComponent
|
||||||
|
title="Vue Navbar Component"
|
||||||
|
header="Menubar"
|
||||||
|
description="Menubar also known as Navbar, is a horizontal menu component."
|
||||||
|
:componentDocs="docs"
|
||||||
|
:apiDocs="['Menubar', 'MenuItem']"
|
||||||
|
:ptTabComponent="ptComponent"
|
||||||
|
:themingDocs="themingDoc"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
|
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
|
||||||
import BasicDoc from '@/doc/menubar/BasicDoc';
|
import BasicDoc from '@/doc/menubar/BasicDoc';
|
||||||
import ImportDoc from '@/doc/menubar/ImportDoc';
|
import ImportDoc from '@/doc/menubar/ImportDoc';
|
||||||
import StyleDoc from '@/doc/menubar/StyleDoc';
|
|
||||||
import TemplateDoc from '@/doc/menubar/TemplateDoc';
|
import TemplateDoc from '@/doc/menubar/TemplateDoc';
|
||||||
import PTComponent from '@/doc/menubar/pt/index.vue';
|
import PTComponent from '@/doc/menubar/pt/index.vue';
|
||||||
|
import ThemingDoc from '@/doc/menubar/theming/index.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -29,18 +37,14 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'style',
|
|
||||||
label: 'Style',
|
|
||||||
component: StyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
component: AccessibilityDoc
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
ptComponent: PTComponent
|
ptComponent: PTComponent,
|
||||||
|
themingDoc: ThemingDoc
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue