vue-share-buttons
Advanced tools
Comparing version 1.0.6 to 1.0.7
{ | ||
"name": "vue-share-buttons", | ||
"version": "1.0.6", | ||
"version": "1.0.7", | ||
"private": false, | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
263
README.md
@@ -10,2 +10,3 @@ # vue-share-buttons | ||
- [Install using Yarn](#install-using-yarn) | ||
- [Icons](#icons) | ||
- [Usage](#usage) | ||
@@ -24,2 +25,3 @@ - [Import component](#import-component) | ||
- [Link](#link) | ||
- [Roadmap](#roadmap) | ||
- [License](#license) | ||
@@ -34,2 +36,3 @@ | ||
``` | ||
[Link to NPM](https://www.npmjs.com/package/vue-share-buttons) | ||
@@ -42,7 +45,12 @@ | ||
``` | ||
[Link to Yarn](https://yarn.pm/vue-share-buttons) | ||
## Icons | ||
For icons, I use [simpleicons](https://simpleicons.org/) | ||
## Usage | ||
You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need: | ||
You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need: | ||
@@ -52,3 +60,3 @@ #### Import component | ||
```js | ||
import TwitteButton from "vue-share-buttons/src/components/TwitterButton"; | ||
import TwitterButton from "vue-share-buttons/src/components/TwitterButton"; | ||
@@ -58,4 +66,4 @@ const app = new Vue({ | ||
components: { | ||
TwitterButton | ||
} | ||
TwitterButton, | ||
}, | ||
}); | ||
@@ -87,46 +95,46 @@ ``` | ||
**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) | | ||
**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) | | ||
@@ -137,61 +145,61 @@ ### Buttons without a counter | ||
**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" | | ||
**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" | | ||
@@ -202,25 +210,25 @@ ### Buttons for instant messengers | ||
**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 | | ||
@@ -231,7 +239,7 @@ ### Send a message via email | ||
**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 | | ||
@@ -265,6 +273,3 @@ ### Full list of social networks | ||
```html | ||
<twitter-button | ||
v-bind:isBlank="false" | ||
btnText | ||
/> | ||
<twitter-button v-bind:isBlank="false" btnText /> | ||
``` | ||
@@ -277,6 +282,3 @@ | ||
```html | ||
<twitter-button | ||
class="share-button--circle" | ||
v-bind:hasIcon="false" | ||
/> | ||
<twitter-button class="share-button--circle" v-bind:hasIcon="false" /> | ||
``` | ||
@@ -289,6 +291,5 @@ | ||
```html | ||
<twitter-button | ||
v-bind:hasIcon="false" | ||
class="share-button--outline"> | ||
/> | ||
<twitter-button v-bind:hasIcon="false" class="share-button--outline"> | ||
/></twitter-button | ||
> | ||
``` | ||
@@ -301,6 +302,3 @@ | ||
```html | ||
<twitter-button | ||
class="share-button--circle share-button--outline" | ||
btnText | ||
/> | ||
<twitter-button class="share-button--circle share-button--outline" btnText /> | ||
``` | ||
@@ -313,6 +311,3 @@ | ||
```html | ||
<facebook-button | ||
class="share-button--outline" | ||
hasCounter | ||
/> | ||
<facebook-button class="share-button--outline" hasCounter /> | ||
``` | ||
@@ -325,3 +320,3 @@ | ||
```html | ||
<facebook-button | ||
<facebook-button | ||
class="share-button--painted" | ||
@@ -345,4 +340,8 @@ url="https://github.com/" | ||
## 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) |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
683767
36
11995
331