@inax/buttonmenuui
v0.2.29
Published
module for a button menu
Downloads
451
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
andButtonMenuModule
into yourModule
- add
<button-menu></button-menu>
to yourHTML
-code - provide the desired menu structure (described in the following section)
Creating the menu
- create a file
menu.ts
in yourapp
-directory (e.g./app/resources
) - 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
};
- 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.