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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
|
||||
import BasicDoc from '@/doc/megamenu/BasicDoc';
|
||||
import ImportDoc from '@/doc/megamenu/ImportDoc';
|
||||
import StyleDoc from '@/doc/megamenu/StyleDoc';
|
||||
import TemplateDoc from '@/doc/megamenu/TemplateDoc';
|
||||
import VerticalDoc from '@/doc/megamenu/VerticalDoc';
|
||||
import PTComponent from '@/doc/megamenu/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/megamenu/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -35,18 +43,14 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
|
|
@ -8,9 +16,9 @@ import BasicDoc from '@/doc/menu/BasicDoc';
|
|||
import GroupDoc from '@/doc/menu/GroupDoc';
|
||||
import ImportDoc from '@/doc/menu/ImportDoc';
|
||||
import PopupDoc from '@/doc/menu/PopupDoc';
|
||||
import StyleDoc from '@/doc/menu/StyleDoc';
|
||||
import TemplateDoc from '@/doc/menu/TemplateDoc';
|
||||
import PTComponent from '@/doc/menu/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/menu/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -41,18 +49,14 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
|
||||
import BasicDoc from '@/doc/menubar/BasicDoc';
|
||||
import ImportDoc from '@/doc/menubar/ImportDoc';
|
||||
import StyleDoc from '@/doc/menubar/StyleDoc';
|
||||
import TemplateDoc from '@/doc/menubar/TemplateDoc';
|
||||
import PTComponent from '@/doc/menubar/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/menubar/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -29,18 +37,14 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'style',
|
||||
label: 'Style',
|
||||
component: StyleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue