Mastodon share button
This package is a user friendly web component to share in mastodon.
Browsers support
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 |
Preview
Getting Started
Installation
Via CDN
<script src="https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button.js"></script>
Via NPM
$ npm install mastodon-share-button
Usage
<!-- 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>
Documentation
Properties
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 |
CSS Custom Properties (Styling)
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.
Share button
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
|
Modal
Name |
Description |
--modal-title-color |
Text color to modal title. Default to #2c3e50
|
--modal-background-color |
Modal background color. Default to #ffffff
|
Modal close button
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
|
Modal select option and input
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
|
Modal send button
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
|