toaster/sample.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ"
            crossorigin="anonymous"
        />
        <title>Bootstrap 5 Toaster</title>
    </head>

    <body>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy"
            crossorigin="anonymous"
        ></script>
        <script src="toaster.js"></script>
        <script>
            const toaster = new Toaster();
            toaster.error("Error", "Something failed");
            toaster.error("Something failed");
            toaster.success("Success", "Something succeded", false);
            toaster.info("You should know", "Something informational", 5000);
        </script>
    </body>
</html>