![GitHub issues](https://img.shields.io/github/issues/CICCIOSGAMINO/snack-bar) [![npm version](https://badgen.net/npm/v/@cicciosgamino/progress-ring)](https://www.npmjs.com/package/@cicciosgamino/snack-bar) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/cicciosgamino/snack-bar) # 🌰 \ Simple Snackbar CustomElement 🌰!

examples • usage • api • accessibility • TODO •

## Examples ![Example Snackbar](https://raw.githubusercontent.com/CICCIOSGAMINO/cicciosgamino.github.io/master/images/exampleSnackbar.gif) ```html ``` ## 🚀 Usage 1. Install package ```bash npm install --save @cicciosgamino/snack-bar ``` 2. Import ```html ``` 3. Place in your HTML ```html ``` ## 🐝 API ### 📒 Properties/Attributes | Name | Type | Default | Description | ------- | ---------- | ------------ | -------------- | timing | Number | `3000` | Snackbar active timing | title | String | `🌰 ... SnackBar Title` | Snackbar title | active | Boolean | `` | Snackbar active attribute (present/NOT) | closebtn| Boolean | `` | Show the close button when attribute is present ### Methods | Name | Description | -------- | ------------- | `closeSnackbar() => void` | Close the snackbar ### Events *None* ### 🧁 CSS Custom Properties | Name | Default | Description | ------------------- | --------- | ---------------------------------- | `--snak-bk-color` | `#333` | Snackbar background-color | `--snack-txt-color` | `#f5f5f5` | Snackbar text color | `--snack-font-size` | `2.1rem` | Snackbar text / space / proportion | `--snack-bottom` | `0` | Snackbar bottom | `--snack-radius` | `1px` | Snackbar border-radius ### 🤖 Write HTML and JavaScript Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as `