Menu Module Name: MenuModule
Module Name: MenuModule
Menu's can be pretty fancy and TrulyUI have a few options to set up
Showcase
<tl-menu
[items]="menuItems"
[link]="'link'"
[width]="'250px'"
[label]="'label'"
[group]="'category'"
[subItem]="'subItem'"
[icon]="'icon'">
</tl-menu>
<tl-menu
[items]="menuItems"
[link]="'link'"
[label]="'label'"
[docked]="true"
[group]="'category'"
[subItem]="'subItem'"
[icon]="'icon'">
</tl-menu>
<tl-menu
[items]="menuItems"
[link]="'link'"
[width]="'250px'"
[filterEmptyMessage]="'Not Found'"
[inputPlaceholder]="'Type something...'"
[titleMenu]="'Main Menu'"
[label]="'label'"
[group]="'category'"
[subItem]="'subItem'"
[mode]="'advanced'"
[icon]="'icon'">
</tl-menu>
<tl-menu
[items]="menuItems"
[link]="'link'"
[width]="'200px'"
[filterEmptyMessage]="'Not Found'"
[inputPlaceholder]="'Type something...'"
[titleMenu]="'Main Menu'"
[label]="'label'"
[docked]="true"
[dockWidth]="'35px'"
[group]="'category'"
[subItem]="'subItem'"
[mode]="'advanced'"
[icon]="'icon'">
</tl-menu>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
alwaysActive (object) | boolean | false | Object key to set colorized item | true | false |
charsToSearch | number | 2 | Determine number of chars that going to be used to search on AdvancedMenu. | number |
dockWidth | string | 40px | Width of menu when menu is docked. | px | % |
docked | boolean | false | Property to toggle bind docked menu. | px | % |
filterEmptyMessage | string | Nothing to Show | Text that will display when the search return null. | string |
group | string | null | Key that will display menu group. | string |
icon | string | null | Key that will display menu icon. | string |
inputPlaceholder | string | Search... | Text of input search placeholder | string |
itemHeight | string | 30px | Line item height | string |
items | Array<Object> | null | List of items that will fill menu. | Array<Object> |
label | string | basic | Key that will display menu label. | string |
link | string | null | Router link string used to navigate. | string [routerLink] |
maxHeight | string | 800px | Max height of menu box. | px | % |
mode | string | simple | Type of menu | simple | advanced |
operationMode | string | hover | Mode that menu operates | click | hover |
outsideBorder | boolean | false | Controls if the menu box will show border or not | true | false |
subItem | string | null | Key that will display subItem. | string |
titleMenu | string | Main Menu | Text of menu title | string |
width | string | 200px | Width of menu when not docked. | px | % |
widthRootMenu | string | 250px | Width of root menu | px | % |
Events
Name | Parameters | Description |
---|---|---|
callBack | MouseEvent : Native Mouse Event | Callback to invoke when a menu item is clicked, used on object of Items |