Firebase Chat
This package is an easy-to-use web component for integrating a chat using the firestore API.
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 |
View demos 👁
Preview
Getting Started
Installation
Via CDN
Via NPM
$ npm install mastodon-share-button
Usage
<!-- Basic use --> <!-- Customized -->
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:
- 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 |