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;
}