This package has been deprecated

Author message:

No longer Supported

@vendasta/fec-menu
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

menu

Requirements

When using the menu component in your app:

  • add @vendasta/fec-menu to the dependencies of your app
  • add MenuModule to the import list in angular module

Usage

  • add <va-menu></va-menu> to the template of the parent component
Input Description
menuItems JSON list of objects for menu item arguments
activeMenuId which menu item should be marked as the currently visited location
url URL to request JSON data of menuItems (instead of using menuItems)
autoClose The menu will automatically close when user click somewhere other than this menu area

No default menu items will be populated. Specify menu items via the menuItems input.

Example menuItems JSON data

[
    {
        label: 'menu item with no URL',
        menuId: 'no-url-do-something',
        ngRoute: false
    },
    {
        label: 'WTF is “nyancat”?',
        menuId: 'go-to-lmgtfy',
        url: 'lmgtfy.com/?q=nyancat',
        ngRoute: false
    },
    {
        label: 'Route managed by Angular Router',
        menuId: 'angular-route',
        url: '/angular-app',
        ngRoute: true
    }
]

Example output

<va-menu [activeMenuId]="activeMenuId" [url]="apiUrl" [menuItems]="[ {label: 'menu item with no URL', menuId: 'no-url-do-something', ngRoute: false}, {label: 'WTF is “nyancat”?', menuId: 'go-to-lmgtfy', url: 'lmgtfy.com/?q=nyancat', ngRoute: false}]" (menuItemClickEvent)="onMenuItemClick($event);" [autoClose]="true"></va-menu>

emample menu rendering

menu-item

Chiefly used by menu. Generates <li> elements, so must be used within a <ul> or <ol>.

Component inputs

Input Description
menuItem MenuItem object
activeMenuId string

MenuItem object

Field Description
url [optional] Read by MenuItemComponent when handling clicks
label Text displayed
menuId string defining the unique identity within the app
icon [optional] class name for CSS applied icon, on the left
nestedItems [optional] list of MenuItem objects for a sub menu
expanded boolean for sub menu, if it exists — sets whether sub menu is expanded when menu initially renders
rightIcon [optional] class name for another icon, on the right; overrides sub menu icon, if it exists
ngRoute Indicate this route is managed by angular router or not

Example

<va-menu-item [activeMenuId]="activeMenuId" [menuItem]="subMenuItem" (expandEvent)="expandAction($event)" (menuItemClickEvent)="onMenuItemClick($event);"></va-menu-item>

example menu item rendering

Readme

Keywords

none

Package Sidebar

Install

npm i @vendasta/fec-menu

Weekly Downloads

1

Version

1.1.2

License

ISC

Last publish

Collaborators

  • vendasta