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
Name | Type | Default | Description | Options |
---|---|---|---|---|
hover | boolean | false | Property to control if will trigger menu on hover. | true | false |
icon | string | null | Key that will display menu icon. | string |
items | Array<Object> | null | List of items that will fill menu. | Array<Object> |
label | string | basic | Key that will display menu label. | string |
overlapTrigger | boolean | false | Property to control overlapping of target/trigger. | true | false |
positionX | string | before | Position X of menu. | after | before |
positionY | string | bellow | Position Y of menu. | bellow | above |
subItem | string | null | Key that will display subItem. | string |
target | HTMLElement | null | The Element target. | HTMLElement |
trigger | HTMLElement | null | Element that will trigger menu to the Target. | HTMLElement |
Events
Name | Parameters | Description |
---|---|---|
callBack | MouseEvent : Native Mouse Event | Callback to invoke when a menu item is clicked, used on object of Items |