@vaadin-component-factory/vcf-popup

23.3.4 • Public • Published

<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

/@vaadin-component-factory/vcf-popup/

    Package Sidebar

    Install

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

    Weekly Downloads

    1,420

    Version

    23.3.4

    License

    https://raw.githubusercontent.com/vaadin/vaadin-incubator-element/master/LICENSE

    Unpacked Size

    56.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • krissvaa
    • artur-
    • tatulund
    • wajtrvaadin
    • ingmartinlopez
    • paodb
    • jcgueriaud
    • vcf
    • jouni
    • onuridrisoglu