<div id="NuToast" class="nu_toast">
        <div class="nu_toast_in">
            hello!
        </div>
    </div>
    <select id="ToastSelect">
        <option value="nu_toast">选择你想显示的toast</option>
        <option value="nu_toast _open">Toast 默认</option>
        <option value="nu_toast _open _success">Toast success</option>
        <option value="nu_toast _open _warning">Toast warning</option>
        <option value="nu_toast _open _danger">Toast danger</option>
    </select>
ToastSelect.onchange=function (e) {
  var value=e.target.value;
  NuToast.setAttribute("class",value);
}

External CSS

  1. https://cdn.jsdelivr.net/npm/@_nu/vanilla-toast/css/core.min.css
  2. https://cdn.jsdelivr.net/npm/@_nu/vanilla-toast/css/skins/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.