vue-picture-sharesheet
Vue Picture Sharesheet Compoenent
Getting Started
Install
npm install onatcer/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 imagealt
: String : text, Specifies an alternate text for an imageheight
: String : pixels/%, Specifies the height of an imagewidth
: String : pixels/%, Specifies the width of an imageismap
: boolean : ismap, Specifies an image as a server-side image-maplongdesc
: String : URL, Specifies a URL to a detailed description of an imageusemap
: String : #mapname, Specifies an image as a client-side image-mapcrossorigin
: 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 Sharesheeticoncolor
: String : Color, Specifies the Background-color of the Sharesheetposition
: String : bottom | top | left| right, Position of the Sharesheetsize
: String : pixels/%, height/width of the Sharesheetsharemessage
: 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/examplesnpm run-script demo
- Building the demos/examples in /docs
Roadmap
- [ ] Multiple Image Source (srcset .. )
- [ ] Mobile optimized
- [ ] different overlay modes
- [ ] custom icons
Dependencies
babel-cli: ^6.26.0babel-eslint: ^8.2.1babel-loader: ^7.1.5babel-plugin-add-module-exports: ^0.2.1babel-polyfill: ^6.26.0babel-preset-env: ^1.6.1babel-preset-minify: ^0.3.0chai: ^4.1.2cross-env: ^5.1.3css-loader: ^1.0.0eslint: ^4.16.0eslint-config-airbnb: ^16.1.0eslint-plugin-import: ^2.7.0eslint-plugin-jsx-a11y: ^6.0.2eslint-plugin-react: ^7.4.0file-loader: ^1.1.11istanbul: ^1.0.0-alphamocha: ^5.0.0node-sass: ^4.9.2path: ^0.12.7rimraf: ^2.6.2sass-loader: ^7.0.3style-loader: ^0.21.0url-loader: ^1.0.1vue: ^2.5.16vue-loader: ^15.2.4vue-svg-loader: ^0.5.0vue-template-compiler: ^2.5.16webpack: ^4.16.0webpack-cli: ^3.0.8webpack-dev-server: ^3.1.4webpack-merge: ^4.1.3