Directory

← Back

vcf-popup

popup that can be bound to element

Author

Contributors

Rating

<vcf-popup>

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

Screenshot of vcf-popup

Example Usage

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

Live Demo ↗

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#^2.0.0
  • vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.0.0
  • vaadin-element-mixin#vaadin/vaadin-element-mixin#^1.0.1
  • vaadin-license-checker#vaadin/license-checker#^2.0.1
  • vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.0.0
  • vaadin-overlay#^3.0.4
  • iron-media-query#^2.1.0
Released
2019-09-06
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 3.0+
Browser
Browser Independent
Online