Misterzym
/
vue-share-buttons
mirror of https://github.com/misterzym/vue-share-buttons
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: added roadmap

dependabot/npm_and_yarn/lodash-4.17.19
Alexandrshy 5 years ago
parent
c0d405259f
commit
3b71557f25
2 changed files with 127 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 252
      README.md
  2. 4
      package.json

252
README.md
Unescape View File

@ -21,6 +21,7 @@
- [Example](#example)
- [Author](#author)
- [Link](#link)
- [Roadmap](#roadmap)
- [License](#license)
## Installation
@ -30,6 +31,7 @@
```bash
npm i vue-share-buttons
```
[Link to NPM](https://www.npmjs.com/package/vue-share-buttons)
#### Install using Yarn
@ -37,6 +39,7 @@ npm i vue-share-buttons
```bash
yarn add vue-share-buttons
```
[Link to Yarn](https://yarn.pm/vue-share-buttons)
## Icons
@ -55,8 +58,8 @@ import TwitterButton from "vue-share-buttons/src/components/TwitterButton";
const app = new Vue({
el: "#app",
components: {
TwitterButton
}
TwitterButton,
},
});
```
@ -83,152 +86,152 @@ Below are the options you can pass to create your own button.
> Facebook, LinkedIn, Odnoklassniki
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
btnText|String|`Facebook`, `LinkedIn`, `Odnoklassniki`, etc.|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
hasCounter|Boolean|`false`|Presence of a counter with the number of share
digitsCounter|Number|`0`|The number of decimal places in the counter
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)
| **Option** | **Type's** | **Default** | **Description** |
| ------------- | ---------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| btnText | String | `Facebook`, `LinkedIn`, `Odnoklassniki`, etc. | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
| hasCounter | Boolean | `false` | Presence of a counter with the number of share |
| digitsCounter | Number | `0` | The number of decimal places in the counter |
| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
> Tumblr, Vkontakte
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
title|String|`''`|Title you want to share
btnText|String|`Tumblr`, `Vkontakte`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
hasCounter|Boolean|`false`|Presence of a counter with the number of share
digitsCounter|Number|`0`|The number of decimal places in the counter
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)
| **Option** | **Type's** | **Default** | **Description** |
| ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| title | String | `''` | Title you want to share |
| btnText | String | `Tumblr`, `Vkontakte` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
| hasCounter | Boolean | `false` | Presence of a counter with the number of share |
| digitsCounter | Number | `0` | The number of decimal places in the counter |
| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
> Pinterest
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
picture|String|`''`|Picture you want to share
btnText|String|`Pinterest`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
hasCounter|Boolean|`false`|Presence of a counter with the number of share
digitsCounter|Number|`0`|The number of decimal places in the counter
keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)
| **Option** | **Type's** | **Default** | **Description** |
| ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| picture | String | `''` | Picture you want to share |
| btnText | String | `Pinterest` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
| hasCounter | Boolean | `false` | Presence of a counter with the number of share |
| digitsCounter | Number | `0` | The number of decimal places in the counter |
| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) |
### Buttons without a counter
> Twitter, Evernote, Hatena, Instapaper, LiveJournal
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
btnText|String|`Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| btnText | String | `Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Digg, Xing, Pocket
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
btnText|String|`Digg`, `Xing`, `Pocket`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| url | String | `document.location.href` | URL-address you want to share |
| btnText | String | `Digg`, `Xing`, `Pocket` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Blogger
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
title|String|`''`|Title you want to share
btnText|String|`Blogger`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| title | String | `''` | Title you want to share |
| btnText | String | `Blogger` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Reddit, Renren
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
title|String|`''`|Title you want to share
btnText|String|`Reddit`, `Renren`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| url | String | `document.location.href` | URL-address you want to share |
| title | String | `''` | Title you want to share |
| btnText | String | `Reddit`, `Renren` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
> Weibo
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
picture|String|`''`|Picture you want to share
title|String|`''`|Title you want to share
btnText|String|`Weibo`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window
modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks"
modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks"
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| picture | String | `''` | Picture you want to share |
| title | String | `''` | Title you want to share |
| btnText | String | `Weibo` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window |
| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" |
| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" |
### Buttons for instant messengers
> Facebook
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
appID|String|`''`|A unique identifier for the application
url|String|`document.location.href`|URL-address you want to share
btnText|String|`Facebook`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
| **Option** | **Type's** | **Default** | **Description** |
| ---------- | ---------- | ------------------------ | --------------------------------------------- |
| appID | String | `''` | A unique identifier for the application |
| url | String | `document.location.href` | URL-address you want to share |
| btnText | String | `Facebook` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
> Viber, WhatsApp
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
btnText|String|`Viber`, `WhatsApp`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
| **Option** | **Type's** | **Default** | **Description** |
| ---------- | ---------- | ------------------------ | --------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| btnText | String | `Viber`, `WhatsApp` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
> Telegram
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
description|String|`document.title`|Messages you want to share
btnText|String|`Telegram`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
| **Option** | **Type's** | **Default** | **Description** |
| ----------- | ---------- | ------------------------ | --------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| description | String | `document.title` | Messages you want to share |
| btnText | String | `Telegram` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
### Send a message via email
> This isn't really a share button, this is a button that allows you to open the software to send an email message, but it may be useful for you 🙃
**Option**|**Type's**|**Default**|**Description**
-----|-----|-----|-----
url|String|`document.location.href`|URL-address you want to share
btnText|String|`Email`|Text to be written on your button
hasIcon|Boolean|`true`|Presence of social network icon in the button
| **Option** | **Type's** | **Default** | **Description** |
| ---------- | ---------- | ------------------------ | --------------------------------------------- |
| url | String | `document.location.href` | URL-address you want to share |
| btnText | String | `Email` | Text to be written on your button |
| hasIcon | Boolean | `true` | Presence of social network icon in the button |
### Full list of social networks
@ -257,10 +260,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
## Example
```html
<twitter-button
v-bind:isBlank="false"
btnText
/>
<twitter-button v-bind:isBlank="false" btnText />
```
<img width="38" alt="Twitter button with icon" src="https://user-images.githubusercontent.com/14329906/55610855-df9e9880-5794-11e9-8fe2-8c0fd86df43d.png">
@ -268,10 +268,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14)
```html
<twitter-button
class="share-button--circle"
v-bind:hasIcon="false"
/>
<twitter-button class="share-button--circle" v-bind:hasIcon="false" />
```
<img width="84" alt="Twitter circle button" src="https://user-images.githubusercontent.com/14329906/55610809-c564ba80-5794-11e9-9d85-1130f7ad0881.png">
@ -279,10 +276,9 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14)
```html
<twitter-button
v-bind:hasIcon="false"
class="share-button--outline">
/>
<twitter-button v-bind:hasIcon="false" class="share-button--outline">
/></twitter-button
>
```
<img width="85" alt="Twitter outline button without icon" src="https://user-images.githubusercontent.com/14329906/55610923-09f05600-5795-11e9-89c3-13a50ab397eb.png">
@ -290,10 +286,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo]()
```html
<twitter-button
class="share-button--circle share-button--outline"
btnText
/>
<twitter-button class="share-button--circle share-button--outline" btnText />
```
<img width="45" alt="Twitter outline and circle button with icon" src="https://user-images.githubusercontent.com/14329906/55610998-44f28980-5795-11e9-8c73-6c29249b8a17.png">
@ -301,10 +294,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button
[Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14)
```html
<facebook-button
class="share-button--outline"
hasCounter
/>
<facebook-button class="share-button--outline" hasCounter />
```
<img width="184" alt="Twitter outline button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611429-88012c80-5796-11e9-9c71-2bf20e52f95f.png">
@ -331,6 +321,10 @@ This component was developed by [Alexander Shulaev](https://github.com/Alexandrs
SVG-icon by [Simple Icons](https://simpleicons.org/)
## Roadmap
- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action
## License
[The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md)

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "vue-share-buttons",
"version": "1.0.7",
"version": "1.0.8",
"private": false,
"license": "MIT",
"homepage": "https://github.com/Alexandrshy/vue-share-buttons",
@ -26,7 +26,7 @@
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build-bundle": "vue-cli-service build --target lib --name vue-share-buttons ./src/App.vue"
"build-bundle": "vue-cli-service build --target lib --name vue-share-buttons ./src/VueShareButtons.vue"
},
"dependencies": {
"node-sass": "^4.11.0",

Write Preview
Loading…
Cancel
Save