vcf-enhanced-dialog
Web Component for creating customised modal dialogs. This is an extension of the Vaadin Dialog.
<vcf-enhanced-dialog>
<vcf-enhanced-dialog>
is a Web Component for creating customized modal dialogs.
This is an extension of <vaadin-dialog>
that adds the following features:
- Header and footer sections.
- Scrollable content area.
- Size themes.
Live demo ↗ | API documentation ↗
Installation
Install vcf-enhanced-dialog
:
npm i @vaadin-component-factory/vcf-enhanced-dialog --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-enhanced-dialog';
Add <vcf-enhanced-dialog>
element to the page. Use a <template>
or renderer function to add content to the dialog.
<vcf-enhanced-dialog>
<template>
<h2 slot="header">Header</h2>
<p>...</p>
<vaadin-button slot="footer" onclick="cancel()">Cancel</vaadin-button>
</template>
</vcf-enhanced-dialog>
Running demo
Fork the
vcf-enhanced-dialog
repository and clone it locally.Make sure you have npm installed.
When in the
vcf-enhanced-dialog
directory, runnpm install
to install dependencies.Run
npm start
to open the demo.
Server-side API
This is the client-side (Polymer 3) web component. If you are looking for the server-side (Java) API for the Vaadin Platform, it can be found here: Enhanced Dialog
Vaadin Prime
This component is available in the Vaadin Prime subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: Pricing
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: Vaadin Usage Statistics
Links
Compatibility
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/iron-resizable-behavior#^3.0.0
- @polymer/polymer#^3.0.0
- @vaadin/vaadin-button#^2.2.2
- @vaadin/vaadin-dialog#^2.3.0
- @vaadin/vaadin-element-mixin#^2.3.0
- @vaadin/vaadin-lumo-styles#^1.5.0
- @vaadin/vaadin-material-styles#^1.2.3
- @vaadin/vaadin-overlay#^3.3.0
- @vaadin/vaadin-themable-mixin#^1.5.2
- Released
- 2020-12-01
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
vcf-enhanced-dialog - Vaadin Add-on Directory
Web Component for creating customised modal dialogs. This is an extension of the Vaadin Dialog.Header
...