@vendasta/fec-menu

## Requirements

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@vendasta/fec-menu
1.1.26 years ago6 years agoMinified + gzip package size for @vendasta/fec-menu in KB

Readme

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