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!"/>

Commands

  • npm start - Starting a Server to run the demos/examples
  • npm run-script demo - Building the demos/examples in /docs

Roadmap

  • [ ] Multiple Image Source (srcset .. )
  • [ ] Mobile optimized
  • [ ] different overlay modes
  • [ ] custom icons

GitHub