@inax/buttonmenuui

module for a button menu

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@inax/buttonmenuui
0.2.288 months ago6 years agoMinified + gzip package size for @inax/buttonmenuui in KB

Readme

@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.