diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2020-11-15 23:47:23 +0100 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2020-11-15 23:47:23 +0100 |
| commit | a4bf3451bbfc6292f8d33d5241d693251d5a0d01 (patch) | |
| tree | 1d136c532889acd3f9be3e419c5f35f5f7280491 /toaster/README.md | |
| parent | baa57ebf7f927d3d97eb4f538ed185d5d91fb731 (diff) | |
| download | web-components-a4bf3451bbfc6292f8d33d5241d693251d5a0d01.tar.xz web-components-a4bf3451bbfc6292f8d33d5241d693251d5a0d01.zip | |
add wip grid component
use cdn for bootstrap
remove bloat from toaster
Diffstat (limited to 'toaster/README.md')
| -rw-r--r-- | toaster/README.md | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/toaster/README.md b/toaster/README.md new file mode 100644 index 0000000..1cd35b8 --- /dev/null +++ b/toaster/README.md @@ -0,0 +1,42 @@ +# 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 | |