About the vcf-popup-p3 category

Directory vcf-popup-p3
1

vcf-popup-p3: # <vcf-popup-p3>

This is the npm version vcf-popup developed using Polymer 3.

<vcf-popup-p3> 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-p3.netlify.com/

Installation

Install vcf-popup-p3:

npm i @vaadin-component-factory/vcf-popup-p3 --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-popup-p3';

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-p3 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-p3>

Running demo

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

  2. Make sure you have npm installed.

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

  4. Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see GitHub - vaadin/vaadin-usage-statistics: Development-time usage statistics collector..