ak-menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Menu

Directives to create menu and context menu.

Getting started

Import MenuModule

import { MenuModule } from 'ak-menu';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, MenuModule],
  bootstrap: [AppComponent],
})

Basic directives configuration

Create your menu and add directives you want on you trigger. In this example we have two triggers : a button to display the menu on click, and a div to display the same menu on right click.

<button akMenuTrigger [menu]="menu">Open menu</button>
<div akContextMenuTrigger [menu]="menu" style="background-color: blue; height: 70px; width: 100px;"></div>
<div #menu style="border-radius: 5px; width: 200px; height: 200px; background: white;">My menu</div>

Advanced directives configuration

<button akMenuTrigger [menu]="menu" [appendTo]="hTMLElement" (onOpen)="onOpen()" (onClose)="onClose()" [options]="options">Open menu</button> <!-- Trigger 1 -->
import { Component } from '@angular/core';
import { MenuOptions } from 'ak-menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  hTMLElement: HTMLElement = document.body; // To append menu to body

  options: MenuOptions = {
    ...
  };

  onOpen(): void {
    console.log('Menu is opened');
  }

  onClose(): void {
    console.log('Menu is closed');
  }
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.2
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.2
    0
  • 1.0.1
    0
  • 1.0.0
    0

Package Sidebar

Install

npm i ak-menu

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

172 kB

Total Files

34

Last publish

Collaborators

  • andykamga