@inax/buttonmenuui

@inax/buttonmenuui

module for a generic menu system

Install

You can install this package with npm.

npm

npm install @inax/buttonmenuui

Documentation

To implement a buttonmenu into your application, you need to:

• import MenuModule and ButtonMenuModule into your Module
• add <button-menu></button-menu> to your HTML-code
• provide the desired menu structure (described in the following section)

Creating the menu

1. create a file menu.ts in your app-directory (e.g. /app/resources)
2. provide a token for the menu, you can just copy the following into your file from step 1:

import { IMenuItem, BUTTONMENU_TOKEN, DefaultMenuItem } from '@inax/menu';

export function createMenu(): Array<IMenuItem>  {
    return [
            new DefaultMenuItem(0, 'Main', '', [
                new DefaultMenuItem(0, 'Text-on-the-button', '/path-to-page'),
                new DefaultMenuItem(1, 'Text-on-next-button', '/path'),
                new DefaultMenuItem(2, 'you can also add layers', '', [
                    new DefaultMenuItem(0, 'nested item')
                    // the ID-number as the first parameter should be unique inside an array
                    // --> ID's inside of []-brackets cannot interfere with numbers outside of
                    //     The brackets (and the ones outside don't affect the ones inside)
                ])
            ]),
            new DefaultMenuItem(1, 'TopLevelItem', '', [
                // add more items here to access them via the "TopLevelItem" button
            ]),
            new DefaultMenuItem(2), // empty items to fill the line
            new DefaultMenuItem(3),
            new DefaultMenuItem(4),
            new DefaultMenuItem(5),
            new DefaultMenuItem(6),
            new DefaultMenuItem(7)
        ];
}

export const APP_MENU: any = {
  provide: BUTTONMENU_TOKEN,
  useFactory: createMenu
};

1. customice the returned value of the createMenu()-function to suit your application

License

Copyright (c) insite-gmbh. All rights reserved.

See License in the project root for license information.