AZ Snackbar

Default settings

new AZSnackbar(
{
azSnackbarText: "",
azSnackbarPosition: "left-top",
azSnackbarTopMargin: 20,
azSnackbarBottomMargin: 20,
azSnackbarMobileMinHeight: 0,
azSnackbarClose: false,
azSnackbarTimeout: 3000
azSnackbarBackgroundColor: ""
azSnackbarColor: ""
azSnackbarCloseColor: "",
azSnackbarAfterOpen: function () { }
});

Init AZSnackbar

There are two ways to initiate the AZSnackbar. The way you choose is important for further use of the function.

1. new AZSnackbar();
The function is initiated but you do not assign the function to a variable. This means you can use the azSnackbarAfterOpen function in relation to further interaction with the function.

2. var AZSnackbar = new AZSnackbar();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.

Additional Features

If you want to use your own buttons or links to open/close the AZSnackbar.

1. functionlib/azSnackbarAfterOpen

$.subscribe("functionlib/azSnackbarAfterOpen", function (e, data)
{
data.azCloseSnackbar();
});

2. var AZSnackbar

AZSnackbar.azCloseSnackbar();

You also have the option to replace the content of the AZSnackbar.

1. functionlib/azSnackbarAfterOpen

$.subscribe("functionlib/azSnackbarAfterOpen", function (e, data)
{
data.azChangeText("This is a text");
});

2. var AZSnackbar

AZSnackbar.azChangeText("This is a text");

azSnackbarText Type: String Default: "" Values: Text or HTML

azSnackbarPosition Type: String Default: "left-top" Values: "left-top" or "center-top" or "right-top" or "full-width-top" or "left-bottom" or "center-bottom" or "right-bottom" or "full-width-bottom"

azSnackbarTopMargin Type: Integer Default: 20 Unit: pixels

azSnackbarBottomMargin Type: Integer Default: 20 Unit: pixels

azSnackbarMobileMinHeight Type: Integer Default: 0 Unit: pixels
For screen sizes below 576px, you can set a minimum height of the AZSnackbar.

azSnackbarClose Type: Boolean Default: false Values: false or true
By changing the value to true, a close button (X) will be inserted in the right part, at the same time as azSnackbarTimeout is overridden, ie the AZSnackbar is displayed until you choose to close it.

azSnackbarTimeout Type: Integer Default: 3000 Unit: milliseconds

azSnackbarBackgroundColor Type: Color Hex Default: ""
Se også CSS .az-snackbar

azSnackbarColor Type: Color Hex Default: ""
Se også CSS .az-snackbar > .az-snackbar-table .az-snackbar-text

azSnackbarCloseColor Type: Color Hex Default: ""
Se også CSS .az-snackbar > .az-snackbar-table .az-snackbar-close

functionlib/azSnackbarAfterOpen Type: Function

$.subscribe("functionlib/azSnackbarAfterOpen", function (e, data)
{
data.azChangeText - ƒ (n)
data.azCloseSnackbar - ƒ ()
});

This function is triggered when AZSnackbar is fully initiated.

AZ Snackbar CSS

AZ Snackbar has some basic CSS that you should not initially need to adjust. snackbar.css
You can find the CSS which you can change yourself in the file CSS Team

/*---------------------
Snackbar
snackbar.css
---------------------*/

.az-snackbar
{
background-color: #0078D7;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.az-snackbar > .az-snackbar-table .az-snackbar-text
{
color: #FFFFFF;
}

.az-snackbar > .az-snackbar-table .az-snackbar-close
{
color: #FFFFFF;
}