@cicciosgamino/snack-bar NPM

GitHub issues

🌰 \<snack-bar>

Simple Snackbar CustomElement 🌰!

Examples

Example Snackbar

<snack-bar timing="5000" title="Offline"></snack-bar>

🚀 Usage

Install package

npm install --save @cicciosgamino/snack-bar

Import

<!-- Import Js Module -->
<script type="module">
  // Importing this module registers <progress-ring> as an element that you
  // can use in this page.
  //
  // Note this import is a bare module specifier, so it must be converted
  // to a path using a server such as @web/dev-server.
  import '@cicciosgamino/snack-bar'
</script>

Place in your HTML

<snack-bar timing="5000" title="Offline"></snack-bar>

🐝 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 <button>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>

    <!-- Add support for Web Components to older browsers. -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  </head>
  <body>
    <!-- Use Web Components in your HTML like regular built-in elements. -->
    <snack-bar url=""></snack-bar>

    <!-- The Material Web Components use standard JavaScript modules. -->
    <script type="module">

      // Importing this module registers <progress-ring> as an element that you
      // can use in this page.
      //
      // Note this import is a bare module specifier, so it must be converted
      // to a path using a server such as @web/dev-server or @vitejs.
      import '@cicciosgamino/snack-bar'

      // Standard DOM APIs work with Web Components just like they do for
      // built-in elements.
      window.addEventListener('DOMContentLoaded', () => {
        const snack = document.querySelector('snack-bar')
        setTimeout(() => {
          // active the snack
          snack.setAttribute('active', '')
        }, 4000)
        setTimeout(() => {
          // close the snack (before timing ended)
          snack.closeSnackbar()
        }, 6000)
      })
    </script>
  </body>
</html>

🚀 Serve

Serve your HTML with any server or build process that supports bare module specifier resolution (see next section) in this project i'll use vite. So check the vite.config.js and the package.json for the scripts.

vite.config.js

import { defineConfig } from 'vite'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: 'snack-bar.js',
      formats: ['es']
    },
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html')
      }
    }
  }
})

package.json

"scripts": {
  "dev": "vite --host",
  "build": "vite build",
  "preview": "vite preview --port 3000 --host"
},

Contributing

Got something interesting you'd like to share? Learn about contributing.

Accessibility

TODO

🔧 TODO

Basic Unit testing

CSS encapsulation

The elements HTML structure is initialized in a Shadow DOM, so it is impossible to apply CSS to it. If you need to change the element's default style for any reason, you should open up a new issue (or a pull request!), describing your use case, and we'll work with you on solving the problem.

Browser support

Browsers without native custom element support require a polyfill. Legacy browsers require various other polyfills. See examples/index.html for details.