@vaadin-component-factory/vcf-popup
v23.3.4
Published
Vaadin Component Factory Popup for Polymer 3
Downloads
5,824
Readme
<vcf-popup>
This is the npm version vcf-popup developed using Polymer 3.
<vcf-popup> is a Web Component providing an easy way to hide extra content from your webpage and show them to the user whenever they need them.
Demo
https://vcf-popup.netlify.com/
Installation
Install vcf-popup
:
npm i @vaadin-component-factory/vcf-popup --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-popup';
Add vcf-popup
to the page with attribute for
that match id
element to which popup should be bind to. Now after clicking on target element, popup will be shown.
<vaadin-button theme="icon tertiary" id="more">
<iron-icon icon="vaadin:ellipsis-dots-h"></iron-icon>
</vaadin-button>
<vcf-popup for="more" close-on-click>
<template>
<style>
[part='container'] {
padding: 5px 10px;
}
</style>
<div part="container">
<vaadin-button theme="icon">
<iron-icon icon="vaadin:edit"></iron-icon>
</vaadin-button>
<vaadin-button theme="icon">
<iron-icon icon="vaadin:close"></iron-icon>
</vaadin-button>
<vaadin-button theme="icon">
<iron-icon icon="vaadin:plus"></iron-icon>
</vaadin-button>
</div> </template
></vcf-popup>
Running demo
Fork the
vcf-popup
repository and clone it locally.Make sure you have npm installed.
When in the
vcf-popup
directory, runnpm install
to install dependencies.Run
npm start
to open the demo.
Running tests
Unit tests
Run npm test
from command line
Visual tests
- Run
npm start
to open the demo. - Navigate to
http://localhost:8081/dev/
to open page where you can test features of the Popup
Contributing
To contribute to the component, please read the guideline first.
License
Apache License 2.0