Notwithstanding Precautions, Misadventure

    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');
      }
    }

    Install

    npm i ak-menu

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    34

    Last publish

    Collaborators

    • andykamga