aeth
/
keiji


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Toast</title>
    <style>
      .notifications {
        position: absolute;
        top: 10px;
        right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Toast <small>Bootstrap Visual Test</small></h1>

      <div class="row mt-3">
        <div class="col-md-12">
          <button id="btnShowToast" class="btn btn-primary">Show toast</button>
          <button id="btnHideToast" class="btn btn-primary">Hide toast</button>
        </div>
      </div>
    </div>

    <div class="notifications">
      <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
        <div class="toast-header">
          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
          <strong class="me-auto">Bootstrap</strong>
          <small>11 mins ago</small>
        </div>
        <div class="toast-body">
          Hello, world! This is a toast message with <strong>autohide</strong> in 2 seconds
        </div>
      </div>

      <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
          <strong class="me-auto">Bootstrap</strong>
          <small class="text-muted">2 seconds ago</small>
          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Heads up, toasts will stack automatically
        </div>
      </div>
    </div>

    <script src="../../dist/dom/event-handler.js"></script>
    <script src="../../dist/dom/manipulator.js"></script>
    <script src="../../dist/dom/data.js"></script>
    <script src="../../dist/base-component.js"></script>
    <script src="../../dist/toast.js"></script>
    <script>
      window.addEventListener('load', function () {
        Array.from(document.querySelectorAll('.toast'))
          .forEach(function (toastNode) {
            new Toast(toastNode)
          })

          document.getElementById('btnShowToast').addEventListener('click', function () {
            Array.from(document.querySelectorAll('.toast'))
              .forEach(function (toastNode) {
                var toast = Toast.getInstance(toastNode)
                toast.show()
              })
          })

          document.getElementById('btnHideToast').addEventListener('click', function () {
            Array.from(document.querySelectorAll('.toast'))
              .forEach(function (toastNode) {
                var toast = Toast.getInstance(toastNode)
                toast.hide()
              })
          })
      })
    </script>
  </body>
</html>