https://github.com/vaadin-component-factory/vcf-context-item
Web Component for customizable item with dependant context menu
https://github.com/vaadin-component-factory/vcf-context-item
Last synced: 2 months ago
JSON representation
Web Component for customizable item with dependant context menu
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-context-item
- Owner: vaadin-component-factory
- License: apache-2.0
- Created: 2019-08-20T08:20:48.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-24T12:48:10.000Z (over 4 years ago)
- Last Synced: 2025-03-10T22:34:35.717Z (2 months ago)
- Language: JavaScript
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <vcf-context-item>
[](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[](https://www.npmjs.com/package/@vaadin-component-factory/vcf-context-item)
[Live Demo ↗](https://vcf-context-item.netlify.com/)
## Installation
Install `vcf-context-item`:
```sh
npm i @vaadin-component-factory/vcf-context-item --save
```
## Usage
Once installed, import the module in your application:
```js
import '@vaadin-component-factory/vcf-context-item';
```
Add `` element to the page:
```html
Foobar
```
## Properties
- `menuItems`: An array of objects used to define the content of the context menu. Each object contains the following properties:
- `icon`: The icon name for the menu item (e.g. `"vaadin:edit"`). [Lumo](https://cdn.vaadin.com/vaadin-lumo-styles/1.0.0/demo/icons.html), [Vaadin](https://vaadin.com/components/vaadin-icons) or [Iron](https://www.webcomponents.org/element/@polymer/iron-icons) icon sets may be used. __Note:__ icon set must be imported __separately__.
- `text`: The text for the menu item.
- `callback`: The callback function that is executed when this menu item is selected. The only parameter for this function is a reference to the `vcf-context-item`.
## Events
- `context-menu-click`: Triggered when user clicks the context menu. The events `detail` property contains 2 custom properties:
- `targetItem`: Reference to the `vcf-context-item`.
- `sourceEvent`: Reference to the original click event.
## Running demo
1. Fork the `vcf-context-item` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vcf-context-item` directory, run `npm install` to install dependencies.
1. Run `npm start` to open the demo.
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
## Vaadin Prime
This component is available in the Vaadin Prime subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: https://vaadin.com/pricing
## License
Apache License 2.0