@vaadin-component-factory/vcf-popup

<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

1. Fork the vcf-popup repository and clone it locally.

2. Make sure you have npm installed.

3. When in the vcf-popup directory, run npm install to install dependencies.

4. Run npm start to open the demo.

Running tests

Unit tests

Run npm test from command line

Visual tests

1. Run npm start to open the demo.
2. 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