Snackbar Alerts similar to MUI made with Vanilla Javascript & Bulma
Add the CSS Stylesheet and Javascript to your header
<link href="https://cdn.rampage.place/snackbar.css" rel="stylesheet">
<script src="https://cdn.rampage.place/snackbar.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>jQuery is required.
https://rampagellc.github.io/Snackbar-Alerts/example/
<!DOCTYPE html>
<html>
<head>
<title>Snackbar Demo</title>
<meta name="description" content="Example Snackbar Notification System by RAMPAGE Interactive">
<link href="../src/main.css" rel="stylesheet">
<script src="../src/alets.js"></script>
</head>
<body>
<div id="snackbar-top" class="notices is-top"></div>
<div id="snackbar-bottom" class="notices is-bottom"></div>
</body>
<script>
CreateAlert("Default Example");
</script>
</html>CreateAlertId(prefix)
Generates alert id, used for CreateAlert.
CreateAlertId returns void.
HideAlert(id)
Hide alert with that id.
HideAlert returns void.
CreateAlert(MessageBody, Position, BackgroundColor, ButtonTextColor, DismissButtonText, CustomStyle, CustomTextStyle)
Message shown
Position where alert is shown. Valid options are: top, bottom.
Message background color. Valid options are:
{
"light": "#e8e8e8",
"dark": "#232427",
"black": "#0a0a0a",
"grey": "#2e2e2e",
"danger": "#ff2b2b"
}Button text color. Valid options are:
{
"light": "#e8e8e8",
"black": "#0a0a0a",
"grey": "#2e2e2e",
"blue": "#4287f5",
}Custom styles for background, overwrites/disables BackgroundColor.
Custom styles for button, overwrites/disables ButtonTextColor.
CreateAlert returns AlertId which can be used to HideAlert with HideAlert(id)
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.