popup that can be bound to element
APACHE-2.0 License
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.
https://vcf-popup.netlify.com/
Install vcf-popup
:
npm i @vaadin-component-factory/vcf-popup --save
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>
Fork the vcf-popup
repository and clone it locally.
Make sure you have npm installed.
When in the vcf-popup
directory, run npm install
to install dependencies.
Run npm start
to open the demo.
Run npm test
from command line
npm start
to open the demo.http://localhost:8081/dev/
to open page where you can test features of the PopupTo contribute to the component, please read the guideline first.
Apache License 2.0