ruclib-context-menu

This library provides a flexible and customizable context menu component for your Angular applications. Users can integrate the dialog component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details:

RUC Library Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.

Install complete library

npm install @uxpractice/ruc-lib

Install individual component

If users only need the dataflow component, they can install it separately npm install @ruc-lib/context-menu

Usage

To use the context menu component in your project, follow the integration guidelines provided in the documentation. Customize the context menu as per your requirements by adjusting the configuration options.

import required modules

Import ContextModule into app.module.ts file.

for library import { RuclibContextMenuModule } from '@uxpractice/ruc-lib/context-menu;

for seperate package import { RuclibContextMenuModule } from '@ruc-lib/context-menu;

use component selector

<uxp-ruclib-context-menu [rucInputData]="inputContextData"(rucEvent)="passEvent($event)">
</uxp-ruclib-context-menu>

Input and Output

Inputs:

• rucInputData -> Data to be passed to the context menu. [i.e- type, matIconName, matButtonColor, matButtonLabelName, imgUrl, alternateImg, contextMenuData[label, icon, disabled, submenu[{label, icon, id, disabled}] ], xPosition, yPosition, leftClick].

Outputs:

• rucEvent -> Event emitted from the context menu.

rucInputData (sample object)

Default value be like –

export const mockDataForInputContextData = {
type: 'icon',
matIconName: 'account_balance',
matButtonColor: 'primary',
matButtonLabelName: 'Click',
imgUrl: 'abc.jpg',
alternateImg: '',
contextMenuData: [
{ label: 'Copy', icon: 'file_copy', id: 1, disabled: true },
{ label: 'Create', icon: 'create', id: 2, disabled: false },
{
label: 'Send to',
icon: 'send',
disabled: false,
submenu: [
{ label: 'Bluetooth', id: 3, icon: 'bluetooth', disabled: false },
{ label: 'email', id: 4, icon: 'email', disabled: true },
],
},
],
xPosition: 'after',
yPosition: 'below',
leftClick: false,
};

Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

Acknowledgements

Thank you for choosing the Context menu Component Library. If you have any feedback or suggestions, please let us know!