https://github.com/vaadin-component-factory/vcf-enhanced-dialog

Web Component for creating customised modal dialogs. This is an extension of the vaadin-dialog.
https://github.com/vaadin-component-factory/vcf-enhanced-dialog

javascript polymer vaadin vaadin-component-factory web-component

Last synced: about 1 month ago
JSON representation

Web Component for creating customised modal dialogs. This is an extension of the vaadin-dialog.

• Host: GitHub
• URL: https://github.com/vaadin-component-factory/vcf-enhanced-dialog
• Owner: vaadin-component-factory
• License: apache-2.0
• Created: 2020-05-12T15:15:17.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-06-16T15:48:02.000Z (almost 3 years ago)
• Last Synced: 2025-03-24T17:52:51.826Z (about 2 months ago)
• Topics: javascript, polymer, vaadin, vaadin-component-factory, web-component
• Language: JavaScript
• Homepage: https://vcf-enhanced-dialog.netlify.app/
• Size: 80.1 KB
• Stars: 2
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <vcf-enhanced-dialog>

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

[![npm version](https://badgen.net/npm/v/@vaadin-component-factory/vcf-enhanced-dialog)](https://www.npmjs.com/package/@vaadin-component-factory/vcf-enhanced-dialog)

[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadin-component-factoryvcf-enhanced-dialog)

`` is a Web Component for creating customized modal dialogs.

This is an extension of [``](https://vaadin.com/components/vaadin-dialog/html-api/elements/Vaadin.DialogElement)

that adds the following features:

- Header and footer sections.

- Scrollable content area.

- Size themes.

![Screenshot for Vaadin Component Factory enhanced dialog](https://user-images.githubusercontent.com/3392815/86490846-8e9f9a80-bd71-11ea-99cd-8e0a769ed8dd.png)

[Live demo ↗](https://vcf-enhanced-dialog.netlify.app)

|

[API documentation ↗](https://vcf-enhanced-dialog.netlify.app/api/#/elements/vcf-enhanced-dialog)

## Installation

Install `vcf-enhanced-dialog`:

```sh

npm i @vaadin-component-factory/vcf-enhanced-dialog --save

```

## Usage

Once installed, import it in your application:

```js

import '@vaadin-component-factory/vcf-enhanced-dialog';

```

Add `` element to the page. Use a `` or [renderer](https://vcf-enhanced-dialog.netlify.app/api/#/elements/vcf-enhanced-dialog#description) function to add content to the dialog.

```html

  

    
Header

    
...

    Cancel

  


```

## Running demo

1. Fork the `vcf-enhanced-dialog` repository and clone it locally.

1. Make sure you have [npm](https://www.npmjs.com/) installed.

1. When in the `vcf-enhanced-dialog` directory, run `npm install` to install dependencies.

1. 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](https://vaadin.com/directory/component/enhanced-dialog)

## License

Apache License 2.0