Installation
npm install @credenceanalytics/mega-menu --save
import MegaMenu from '@credenceanalytics/mega-menu'
export default {
props: {
/**
* An `Array` or a `Promise` which resolves to an array or a `Function` which returns an array.
* This array contains objects.
*/
menuList: {
type: [Function, Array, Promise],
default: function () {
return [];
},
},
/**
* An `Object` which will be used to ovverride existing column name which are being used to display urls, icons and application name.
* This object contains `url`, `icon` and `name`
* `url` - A key from menuList array of object which contain referece to application url
* `icon` - A key from menuList array of object which contain reference to application icons.
* `name` - A key from menuList array of object which contain reference to application name.
*/
keys: {
type: Object,
default() {
return {
url: "APP_PAGE",
icon: "CLS_ICON",
name: "APP_NAME"
}
}
}
},
components: {
MegaMenu
}
}
Example
-
mega-menu component with default array list or without keys prop.
<template>
<mega-menu app-list="appList" />
</template>
<script lang="javascript">
import MegaMenu from '@credenceanalytics/mega-menu';
export default {
components: {
MegaMenu
},
data() {
return {
appList: [
{
APP_PAGE: "/Framewrk/Operations.html",
CLS_ICON: "icon-3",
APP_NAME: "Operations"
},
{
APP_PAGE: "/Framewrk/ClientManagement.html",
CLS_ICON: "icon-4",
APP_NAME: "Client Management"
}
]
}
}
}
</script>
-
mega-menu component with different array list or different key references to routes, appname, etc..
<template>
<mega-menu app-list="appList" :keys="keyReferences"/>
</template>
<script lang="javascript">
import MegaMenu from '@credenceanalytics/mega-menu';
export default {
components: {
MegaMenu
},
data() {
return {
appList: [
{
APP_URL: "/Framewrk/Operations.html",
APP_ICON: "icon-3",
NAME: "Operations"
},
{
APP_URL: "/Framewrk/ClientManagement.html",
APP_ICON: "icon-4",
NAME: "Client Management"
}
],
keyReferences: {
url: "APP_URL",
icon: "APP_ICON",
name: "NAME"
}
}
}
}
</script>