This package is a user friendly web component to share in mastodon.
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
|---|---|---|---|---|---|
| IE11 (limited), Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
<script src="https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button.js"></script>$ npm install mastodon-share-button <!-- Basic use -->
<mastodon-share-button share_message="Text to share"></mastodon-share-button>
<!-- Customized -->
<mastodon-share-button
instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]'
share_message="Text to share"
share_button_text="Custom share button text"
close_button_text="Custom close text"
send_button_text="Custom send text"
modal_title="Custom modal title"
other_instance_text="Custom other instance select option text"
dark_mode="true">
</mastodon-share-button>| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
share_message |
share_message |
Required | Text to share in mastodon. | string |
undefined |
instances |
instances |
Not Required | List of instances to display in the select option. | string |
'["https://mastodon.social"]' |
dark_mode |
dark_mode |
Not Required | Option to activate dark mode. | boolean |
false |
send_button_text |
send_button_text |
Not Required | Text to show at the bottom of sharing in the modal. | string |
"Send" |
icon_url |
icon_url |
Not Required | Icon url. Put it "" to not display any icon. | string |
mastodon oficial logo |
modal_title |
modal_title |
Not Required | Title to display in modal. | string |
"Share to Mastodon" |
close_button_text |
close_button_text |
Not Required | Text to display to close modal. | string |
"Close" |
other_instance_text |
other_instance_text |
Not Required | Text to display on the form. | string |
"Other instance" |
share_button_text |
share_button_text |
Not Required | Text to show at the bottom of sharing. Put it "" to not display any text. | string |
"Share to Mastodon" |
open |
open |
Not Required | Variable to display the modal opened. | boolean |
false |
The component could be styled with the help of CSS3 variables.
Example:
<style type="text/css">
mastodon-share-button {
--share-button-background-color:#259FFC;
--share-button-background-color-hover:#C7E7FE;
}
</style>- Important: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.
| Name | Description |
|---|---|
| --share-button-background-color | Share button background color. Default to #cccccc |
| --share-button-background-color-hover | Share button background hover color. Default to #949292 |
| --share-button-border-radius | Default to 5px |
| --share-button-padding | Default to 12px |
| --share-button-color | Default to #ffffff |
| --share-button-font-size | Default to 16px |
| --share-button-font-weight | Default to bold |
| --share-button-border | Defaul to none |
| Name | Description |
|---|---|
| --modal-title-color | Text color to modal title. Default to #2c3e50 |
| --modal-background-color | Modal background color. Default to #ffffff |
| Name | Description |
|---|---|
| --close-modal-button-background-color | Close button background color. Default to #cccccc |
| --close-modal-button-background-color-hover | Share button background hover color. Default to #949292 |
| --close-modal-button-border-radius | Default to 5px |
| --close-modal-button-padding | Default to 6px |
| --close-modal-button-color | Default to #ffffff |
| --close-modal-button-font-size | Default to 16px |
| --close-modal-button-font-weight | Default to bold |
| --close-modal-button-border | Defaul to none |
| Name | Description |
|---|---|
| --select-color | Select and input font color. Default to #2c3e50 |
| --select-background-color | Select and input background color. Default to #ffffff |
| --select-border | Select and input border. Default to 2px solid #2c3e50 |
| --select-font-weight | Select and input font weight. Default to bolder |
| --select-font-size | Font size. Default to 18px |
| --select-padding | Default to 10px |
| --select-border-radius | Default to 0.25em |
| --select-line-height | Default to 3 |
| Name | Description |
|---|---|
| --send-modal-button-color | Default to #ffffff |
| --send-modal-button-background-color | Default to #2692da |
| --send-modal-button-border-radius | Default to 5px |
| --send-modal-button-width | Default to 100% |
| --send-modal-button-height | Default to 6vh |
| --send-modal-button-min-height | Default to 42px |
| --send-modal-button-font-size | Default to 4vh |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent