Contact us Create app

Directory

← Back

vcf-share-dialog

Vaadin Component Factory Share Dialog

Author

Rating

Links

Popularity

<100

<vcf-share-dialog>

Demo

https://vcf-share-dialog.netlify.com/

Installation

Install vcf-share-dialog:

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

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-share-dialog/vcf-share-dialog.js';

And use it:

<vcf-share-dialog share-url="https://vaadin.com"></vcf-share-dialog>

Attributes

  • share-url: The url which will be shared.
  • members: A list of people whom this URL is shared with.
  • button-caption: Text shown inside the button.
  • title-text: Title of share dialog.
  • secondary-title-text: Secondary title shown on the top right corner of share dialog.
  • share-title: Title used for native share.
  • share-text: Description used for native share.
  • share-button-text: Text shown inside native share button.
  • description-text: Description text of share dialog.
  • copy-text: Text shown inside copy button.
  • notes-text: Secondary text shown after copy button.
  • members-text: Title of members section.
  • close-text: Text shown inside close button.
  • copied-text: Text shown when the share url is copied.

Events

The component fires 2 custom events:

  • vcf-share-dialog-opened: when the share dialog opens.
  • vcf-share-dialog-link-copied: when the sharable link is copied.

Running demo

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

  2. Make sure you have npm installed.

  3. When in the vcf-share-dialog 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 https://github.com/vaadin/vaadin-usage-statistics.

Compatibility

(Loading compatibility data...)

Last updated: 2019-09-03

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-icon#^3.0.1
  • @polymer/iron-iconset-svg#^3.0.1
  • @polymer/polymer#^3.0.0
  • @vaadin-component-factory/vcf-avatar-item#^0.1.1
  • @vaadin-component-factory/vcf-webshare-button#^0.2.0
  • @vaadin/vaadin-button#2.2.0
  • @vaadin/vaadin-dialog#^2.2.1
  • @vaadin/vaadin-element-mixin#^2.1.3
  • @vaadin/vaadin-lumo-styles#^1.5.0
  • @vaadin/vaadin-notification#^1.4.0
  • @vaadin/vaadin-text-field#2.4.8
  • @vaadin/vaadin-themable-mixin#^1.4.4
Released
2019-09-03
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

vcf-share-dialog - Vaadin Add-on Directory

Vaadin Component Factory Share Dialog vcf-share-dialog - Vaadin Add-on Directory
# <vcf-share-dialog> ## Demo https://vcf-share-dialog.netlify.com/ ## Installation Install `vcf-share-dialog`: ```sh npm i @vaadin-component-factory/vcf-share-dialog --save ``` ## Usage Once installed, import it in your application: ```js import '@vaadin-component-factory/vcf-share-dialog/vcf-share-dialog.js'; ``` And use it: ```html ``` ### Attributes - `share-url`: The url which will be shared. - `members`: A list of people whom this URL is shared with. - `button-caption`: Text shown inside the button. - `title-text`: Title of share dialog. - `secondary-title-text`: Secondary title shown on the top right corner of share dialog. - `share-title`: Title used for native share. - `share-text`: Description used for native share. - `share-button-text`: Text shown inside native share button. - `description-text`: Description text of share dialog. - `copy-text`: Text shown inside copy button. - `notes-text`: Secondary text shown after copy button. - `members-text`: Title of members section. - `close-text`: Text shown inside close button. - `copied-text`: Text shown when the share url is copied. ### Events The component fires 2 custom events: - `vcf-share-dialog-opened`: when the share dialog opens. - `vcf-share-dialog-link-copied`: when the sharable link is copied. ## Running demo 1. Fork the `vcf-share-dialog` repository and clone it locally. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-share-dialog` directory, run `npm install` to install dependencies. 1. Run `npm start` to open the demo. ## Contributing To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) 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 https://github.com/vaadin/vaadin-usage-statistics.
Online Demo
License
View on NPM
View on GitHub

vcf-share-dialog version 0.1.0
### Dependencies * @polymer/app-localize-behavior#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.1.1
### Dependencies * @polymer/app-localize-behavior#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.1.2
### Dependencies * @polymer/app-localize-behavior#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.2.0
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.2.1
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.3.0
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.1.0 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.3.1
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.1.0 * @vaadin/vaadin-button#^2.2.1 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.3.2
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.1.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#^2.4.7 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.0
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#^2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.1
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.2
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.3
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.4
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.5
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 0.4.6
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

vcf-share-dialog version 1.0.0
### Dependencies * @polymer/iron-icon#^3.0.1 * @polymer/iron-iconset-svg#^3.0.1 * @polymer/polymer#^3.0.0 * @vaadin-component-factory/vcf-avatar-item#^0.1.1 * @vaadin-component-factory/vcf-webshare-button#^0.2.0 * @vaadin/vaadin-button#2.2.0 * @vaadin/vaadin-dialog#^2.2.1 * @vaadin/vaadin-element-mixin#^2.1.3 * @vaadin/vaadin-lumo-styles#^1.5.0 * @vaadin/vaadin-notification#^1.4.0 * @vaadin/vaadin-text-field#2.4.8 * @vaadin/vaadin-themable-mixin#^1.4.4

Online