An easy and beautiful sharesheet when hovering over images

vue-picture-sharesheet

A Vue Picture Sharesheet Component heavily inspired by the Image Sharesheet in Apple's Newsroom.

vue-picture-sharesheet provides an easy and beautiful sharesheet when hovering over images. Currently supported main features are:

sharing to Twitter/Facebook
copying the current URL to the Clipboard
Downloading the Image

with cute cats heart_eyes_cat (The Download in the Demo will just download random cat images as the image changes with every request)

Getting Started

(Vue CLI Usage recommended)

Install

npm install vue-picture-sharesheet --save

Import locally

import PictureSharesheet  from 'vue-picture-sharesheet';

export default {
  name: 'HelloWorld',
  components: {
    PictureSharesheet
  }
}

OR import globally (f.e. in the Main.js)

import PictureSharesheet from 'vue-picture-sharesheet'
Vue.component('picture-sharesheet',PictureSharesheet);

Properties

Native image attributes ?

src: String : URL, Specifies the URL of an image
alt: String : text, Specifies an alternate text for an image
height: String : pixels/%, Specifies the height of an image
width: String : pixels/%, Specifies the width of an image
ismap: boolean : ismap, Specifies an image as a server-side image-map
longdesc: String : URL, Specifies a URL to a detailed description of an image
usemap: String : #mapname, Specifies an image as a client-side image-map
crossorigin : String: anonymous | use-credentials, Allow images from third-party sites that allow cross-origin access to be used with canvas

Component attributes ?

sheetcolor: String : Color, Specifies the Background-color of the Sharesheet
iconcolor: String : Color, Specifies the Background-color of the Sharesheet
position: String : bottom | top | left| right, Position of the Sharesheet
size: String : pixels/%, height/width of the Sharesheet
sharemessage: String : Will be shared in addition to the link. Per Default Website Title. In Facebook Share Dialog as Quote.
fixed: Boolean : if set Sharesheet is visible all the time

Examples

Showing the Sharesheet all the time (not only while :hover) and set the background-color of the sharesheet to white and the icon color to black.

<picture-sharesheet src="https://source.unsplash.com/800x500/?cat" sheetcolor="#FFF" iconcolor="#000" fixed/>

Set the position of the sharesheet to top, the height of the Sharesheet to 100px and the message that will be shared via the Social Media Buttons to "YAY!"

<picture-sharesheet src="https://source.unsplash.com/600x550/?cat" position="top" size="100px" sharemessage="YAY!"/>