diff options
| author | ivarlovlie <ivar.lovlie@gmail.com> | 2020-06-15 19:27:19 +0200 |
|---|---|---|
| committer | ivarlovlie <ivar.lovlie@gmail.com> | 2020-06-15 19:27:19 +0200 |
| commit | baa57ebf7f927d3d97eb4f538ed185d5d91fb731 (patch) | |
| tree | 714519618698e9a074436e2f179e401566f9c3c6 /bootstrap-v5-toaster/README.md | |
| parent | 55483eee0f655ea9e5bdf88165ec1f2a107f39dc (diff) | |
| download | web-components-baa57ebf7f927d3d97eb4f538ed185d5d91fb731.tar.xz web-components-baa57ebf7f927d3d97eb4f538ed185d5d91fb731.zip | |
add toaster
Diffstat (limited to 'bootstrap-v5-toaster/README.md')
| -rw-r--r-- | bootstrap-v5-toaster/README.md | 44 |
1 files changed, 44 insertions, 0 deletions
diff --git a/bootstrap-v5-toaster/README.md b/bootstrap-v5-toaster/README.md new file mode 100644 index 0000000..c0a49b0 --- /dev/null +++ b/bootstrap-v5-toaster/README.md @@ -0,0 +1,44 @@ +# Bootstrap v5 Toaster + +Create Bootstrap 5 toasts programatically + + + +## Example: + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="stylesheet" href="bootstrap.css" /> + <title>Bootstrap 5 Toaster</title> + </head> + + <body> + <script src="bootstrap.js"></script> + <script src="toaster.js"></script> + <script> + const toasterOptions = { + hideAfter: 3500, + position: "top-right", + }; + const toaster = new Toaster(toasterOptions); + toaster.error("Error", "Something failed"); + toaster.success("Success", "Something succeded", false); + toaster.info("You should know", "Something informational", 5000); + </script> + </body> +</html> +``` + +`toasterOptions` is optional and the values in the example are the default values. \ +`position` can be one of the following: "top-right top-left bottom-right bottom-left". + +All display functions have the following parameters and options: \ +| Parameter | Value | Default | +| ------------- |:-------------:| -----:| +| `title` | required string | undefined | +| `message` | optional string | "" | +| `autohide` | boolean or an int specifying `hideAfter` | true | |