Neovictorian Paisley Menswear

    mastodon-share-button
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    Built With Stencil

    Mastodon share button

    This package is a user friendly web component to share in mastodon.

    Browsers support

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    iOS Safari
    iOS Safari
    Samsung
    Samsung
    IE11 (limited), Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

    View demos 👁

    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

    Install

    npm i mastodon-share-button

    DownloadsWeekly Downloads

    292

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    918 kB

    Total Files

    71

    Last publish

    Collaborators

    • bipoza