paper-snackbar

justinribeiro

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/justinribeiro/paper-snackbar/2.0.2/paper-snackbar/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-snackbar.html">
<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="testAll()">Message + Link</button>
<button onclick="testMessage()">Only Message</button>

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

  function testMessage() {
    document.dispatchEvent(new CustomEvent('paper-snackbar-notify', {
      bubbles: true,
      composed: true,
      detail: {
        message: 'Hi! I am a paper-snackbar with only a message!'
      }
    }));
  }

</script>