0.1.11 • Published 4 years ago
@xylthine/contextmenu v0.1.11
xyl-contextmenu
A simple context menu component for Angular 9+.
Documentation is work in progress.
WARNING
- This component is written with Angular 9, so it will not work with earlier versions of Angular
- Internet Explorer is not supported.
- No RTL support.
- Partial keyboard support.
- This is a simple component I implemented for my personal project, so I cannot guarantee you with frequent updates/bug fixes.
- If you are looking for better/more professional solutions, please check out other open-source projects such as ngx-contextmenu or ngx-rightclick.
Installation
- Install the following packages:
npm i @angular/cdk @xylthine/popup @xylthine/contextmenu
- Add the following line to your global stylesheet file (styles.scss)
@import "~@angular/cdk/overlay-prebuilt.css";
- Import XylContextMenuModule in your app.module.ts file (or another module where you need it.)
Usage
Basic Usage
<xyl-contextmenu [target]="targetElement" [trigger]="'contextmenu'">
<xyl-menu-item text="Export Data">
<xyl-menu-item text="Export as XML"></xyl-menu-item>
<xyl-menu-item text="Export as JSON"></xyl-menu-item>
<xyl-menu-item text="Export as CSV"></xyl-menu-item>
</xyl-menu-item>
<xyl-menu-item [divider]="true"></xyl-menu-item>
<xyl-menu-item text="Close"></xyl-menu-item>
</xyl-contextmenu>
<button #targetElement>Context Menu Button</button>
xyl-contextmenu accepts the following inputs.
target : The target element that the context menu will be attached to.
trigger : You can set it to 'contextmenu' or 'click' to set the trigger event. Default is set to 'contextmenu'.
menuClass: You can pass a string of css classes to help you style the menu.
- Inside xyl-contextmenu tag, you can define multiple xyl-menu-item components.
- Inside xyl-menu-item tag, you can define multiple xyl-menu-item components for a submenu.
- If, for example, you passed 'export-menu' as menuClass input, you can then use the following code to help you style the menu.
xyl-contextmenu-content.export-menu {
/* Your style rules */
}
xyl-menu-item accepts the following inputs and outputs.
disabled: boolean // Disable a menu item.
divider: boolean // Set a menu item as divider. When set to true, all other options are ignored.
icon: string; // Icon class for menu item. For example, you can pass a font icon class such as 'fa fa-plus'. Ignored when iconTemplate option is set.
iconTemplate: TemplateRef<any>; // Pass a template reference to show as menu item icon.
image: string; // Image url for menu item icon. Ignored when imageTemplate option is set.
imageTemplate: TemplateRef<any>; // Pass a template reference to show as menu item image icon.
select: EventEmitter<IMenuItem>; // Called when a menu item is selected.
text: string; // Menu item text. Ignored when textTemplate option is set.
textTemplate: TemplateRef<any>; // Pass a template reference to show as menu item text.
toggleable: boolean; // Pass true if you want to make the menu item toggleable.
toggled: boolean; // Set toggle status of menu item. This is a two-way binding. [(toggled)]
visible: boolean; // Set false to hide a menu item.
License
MIT