PopupMenu Module Name: PopupMenuModule

Module Name: PopupMenuModule

PopupMenu is a list that lists over some content as a menu.

Showcase
Basic


<tl-button #target1 [text]="'Target Element'"></tl-button>
<tl-popupmenu [target]="target1" [items]="menuItems" [label]="'label'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
With Trigger
Trigger

<a #trigger class="trigger-element"> Trigger </a>
<tl-button #target2 [text]="'Target Element'"></tl-button>
<tl-popupmenu  [target]="target2" [trigger]="trigger" [items]="menuItems" [label]="'label'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
Position Bellow


<tl-button #bellow [text]="'Target Element Bellow'"></tl-button>
<tl-popupmenu [target]="bellow" [items]="menuItems" [positionY]="'bellow'" [label]="'label'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
Position Above


<tl-button #above [text]="'Target Element Above'"></tl-button>
<tl-popupmenu [target]="above" [items]="menuItems" [positionY]="'above'" [label]="'label'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
Position Before


<tl-button #before [text]="'Target Element Before'"></tl-button>
<tl-popupmenu [target]="before" [items]="menuItems" [positionX]="'before'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
Position After


<tl-button #after [text]="'Target Element After'"></tl-button>
<tl-popupmenu [target]="after" [items]="menuItems" [positionX]="'after'" [label]="'label'" [subItem]="'subMenu'" [icon]="'icon'"></tl-popupmenu>
Menu Configuration
this.items = [
  { label: 'The Target 2 Context Menu Item 1', icon: '', callBack: this.functionContext2 },
  { label: 'The Target 2 Context Menu Item 2', icon: '',
  subMenu: [
      { label: 'The Target 2 Context Menu Item 3', icon: '' },
      { label: 'The Target 2 Context Menu Item 4', icon: '' },
      { label: 'The Target 2 Context Menu Item 5', icon: '' }
    ]
  },
];
Properties
NameTypeDefaultDescriptionOptions
hoverbooleanfalseProperty to control if will trigger menu on hover. true | false
iconstringnullKey that will display menu icon. string
itemsArray<Object>nullList of items that will fill menu. Array<Object>
labelstringbasicKey that will display menu label. string
overlapTriggerbooleanfalseProperty to control overlapping of target/trigger. true | false
positionXstringbeforePosition X of menu. after | before
positionYstringbellowPosition Y of menu. bellow | above
subItemstringnullKey that will display subItem. string
targetHTMLElementnullThe Element target. HTMLElement
triggerHTMLElementnullElement that will trigger menu to the Target. HTMLElement
Events
NameParametersDescription
callBack
MouseEvent : Native Mouse Event
Callback to invoke when a menu item is clicked, used on object of Items