<div class="block">
  <h3>normal</h3>
  <button id="btn">normal</button>
  <pre>
    Toast('hello world')
  </pre>
</div>

<div class="block">
  <h3>with options</h3>
  <button id="delay">delay</button>
  <pre>
    Toast({
      message: 'hello world',
      duration: 4000,
    });
  </pre>
  <button id="modal">modal</button>
  <pre>
    Toast({
      message: 'hello world',
      mask: true,
    });
  </pre>
  <button id="type">type</button>

  <pre>
    Toast({
      message: 'hello world',
      type: 'icon-music',
    });
  </pre>

  <button id="mount">mount</button>
  <pre>
    Toast({
      message: 'hello world',
      mountTo: function() {
        return document.getElementById('box')
      }
    });
  </pre>
  <div id="box"><b>box</b></div>
</div>

<div class="block">
  <h3>alias</h3>
  <button id="success">success</button>
  <pre>
    Toast.success('hello world')
  </pre>
  <button id="error">error</button>
  <pre>
    Toast.error('hello world')
  </pre>
  <button id="loading">loading</button>
  <pre>
    const t = Toast.loading('hello world')
    t.clear()
  </pre>
</div>

<div class="block">
  <h3>methods</h3>
  <button id="clearAll">clearAll</button>
  <pre>
    Toast.clearAll()
  </pre>

  <button id="myToast">myToast</button>
  <pre>
    const myToast = extendAlias({
      type: 'icon-music',
      duration: 1000,
      mask: true
    });
    myToast('asdf')
  </pre>
</div>
 body {
      background-color: #f7f7f7;
      margin: 0;
    }

    .block {
      overflow: hidden;
      padding: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 10px;
      background-color: #fff;
      border-radius: 4px;
    }

    .block h3 {
      margin: 0 0 10px;
    }

    .block pre {
      background-color: #f7f7f7;
      padding-top: 10px;
    }

    #box {
      height: 200px;
      border: 1px solid #000;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @media screen and (min-width: 700px) {
      body {
        width: 700px;
        margin: 0 auto
      }
    }
const Toast = window.Toast;
const {extendAlias} = Toast;
const $ = (selector) => document.querySelector(selector);
const listen = event => query => cb => $(query).addEventListener(event, cb)
const listenClick = listen('click')

listenClick('#btn')(() => Toast('hello world'));

listenClick('#delay')(() => Toast({ message: 'hello world', duration: 4000 }));

listenClick('#modal')(() => Toast({ message: 'hello world', mask: true }));

listenClick('#type')(() => Toast({ type: 'icon-music', message: 'hello world' }));

listenClick('#mount')(() => Toast({
  message: 'hello world',
  mask: true,
  mountTo: () => document.getElementById('box'),
}));
 
listenClick('#success')(() => Toast.success('hello world'));

listenClick('#error')(() => Toast.error('hello world'));

listenClick('#loading')(() => {
  const t = Toast.loading('hello world');
  setTimeout(() => {
    t.clear();
  }, 2000)
}); 
 
listenClick('#clearAll')(() => Toast.clearAll());

const myToast = extendAlias({type: 'icon-music', duration: 1000, mask: true});
listenClick('#myToast')(() => myToast('asdf'));

External CSS

  1. https://unpkg.com/@redbuck/toast@0.0.5/lib/toast.css
  2. https://qyf1card1.h5.yunhuiyuan.cn/static/font/iconfont.css

External JavaScript

  1. https://unpkg.com/@redbuck/toast@0.0.5/lib/toast.js