Directory

← Back

paper-snackbar

Polymer 2 web component providing brief feedback about an operation through a message at the bottom of the screen that is loosely based on the Material Design spec.

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/justinribeiro/paper-snackbar on 2019-05-22 ]

<paper-snackbar>

Published on webcomponents.org

Providing brief feedback about an operation through a message at the bottom of the screen that is loosely based on the Material Design spec.

Usage

<paper-snackbar> sits at the top level of your application and listens for a custom event called paper-snackbar-notify. The basic steps for using it are:

  1. Find a nice place to put it in your application. I usually choose my top level app element.

  2. Call paper-snackbar-notify via this.dispatchEvent(new CustomEvent('paper-snackbar-notify', ...));.

  3. Yipee, snackbar shows up!

Demo

<style is="custom-style">
  paper-snackbar {
    --paper-snackbar-background:     #323232;
    --paper-snackbar-text:           #ffffff;
    --paper-snackbar-link:           #f4cb1e;
  }
</style>

<paper-snackbar></paper-snackbar>

<button onclick="test()">Click Me</button>

<script>
  function test() {
    document.dispatchEvent(new CustomEvent('paper-snackbar-notify', {
        bubbles: true, 
        composed: true,
        detail: { 
          message: 'Hi! I am a paper-snackbar!', 
          targetTitle: 'Magic Link',
          targetUrl: '#'
        }
    }));
  }
</script>

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--paper-snackbar-background Background color to entire element #323232
--paper-snackbar-text Color applied to element text #ffffff
--paper-snackbar-link Color applied to link element text #f4cb1e

Using the mixin

Presuming you have a lot of forms or elements that just want to send snackbar messages all day long, you can also use the class mixin.

  1. Import paper-snackbar-mixin.html into your element:
<link rel="import" href="../bower_components/paper-snackbar/paper-snackbar-mixin.html">
  1. Extend from PaperSnackbarNotify():
class MyMagicalElement extends PaperSnackbarNotify(Polymer.Element) {}
  1. When you want to use the snackbar, just call this.paperSnackbarNotify():
this.paperSnackbarNotify('Your record was added.', 'view', '/some/link/you/want');

Why?

This is largely based on what was in the Polymer SHOP demo. Then I decided I wanted this more global thing I could just call when shuffling forms in and out, so it got a little API. Then it was because I keep recreating this and over again in various ways and I'm really tired of copy and paste.

If you're looking for something with less of an opinion and more on the Material spec, you may also want to take a look at paper-toast.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • paper-button#PolymerElements/paper-button#^2.0.0
  • font-roboto#PolymerElements/font-roboto#^1.0.1
Released
2017-06-21
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

paper-snackbar - Vaadin Add-on Directory

Polymer 2 web component providing brief feedback about an operation through a message at the bottom of the screen that is loosely based on the Material Design spec. paper-snackbar - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/justinribeiro/paper-snackbar](https://github.com//justinribeiro/paper-snackbar/blob/2.0.2/README.md) on 2019-05-22 ]** # \ [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/justinribeiro/paper-snackbar) Providing brief feedback about an operation through a message at the bottom of the screen that is loosely based on the [Material Design spec](https://material.io/guidelines/components/snackbars-toasts.html#). ## Usage `` sits at the top level of your application and listens for a custom event called `paper-snackbar-notify`. The basic steps for using it are: 1. Find a nice place to put it in your application. I usually choose my top level app element. 2. Call `paper-snackbar-notify` via `this.dispatchEvent(new CustomEvent('paper-snackbar-notify', ...));`. 3. Yipee, snackbar shows up! ## Demo ```html ``` ## Styling The following custom properties and mixins are available for styling: | Custom property | Description | Default | | --- | --- | --- | | `--paper-snackbar-background` | Background color to entire element | `#323232` | | `--paper-snackbar-text` | Color applied to element text | `#ffffff` | | `--paper-snackbar-link` | Color applied to link element text | `#f4cb1e` | ## Using the mixin Presuming you have a lot of forms or elements that just want to send snackbar messages all day long, you can also use the class mixin. 1. Import `paper-snackbar-mixin.html` into your element: ```html ``` 2. Extend from PaperSnackbarNotify(): ```javascript class MyMagicalElement extends PaperSnackbarNotify(Polymer.Element) {} ``` 3. When you want to use the snackbar, just call `this.paperSnackbarNotify()`: ```javascript this.paperSnackbarNotify('Your record was added.', 'view', '/some/link/you/want'); ``` ## Why? This is largely based on what was in the Polymer SHOP demo. Then I decided I wanted this more global thing I could just call when shuffling forms in and out, so it got a little API. Then it was because I keep recreating this and over again in various ways and I'm really tired of copy and paste. If you're looking for something with less of an opinion and more on the Material spec, you may also want to take a look at [paper-toast](https://www.webcomponents.org/element/PolymerElements/paper-toast).
Online