Snackbar

The Snackbar component notifies the user of a completed or upcoming action without interrupting him.

Initializing the component.

The appearance of the Snackbar component is triggered using the snackbar.open() function.

snackbar

<script>snackbar.open()</script>

<script>snackbar.open()</script>

By default, this component is displayed for 3 seconds. However, you can change its duration with timer by entering it in an object in the second parameter.

snackbar

<button onclick="open_snackbar2()">Open Snackbar</button>
<script>
function open_snackbar2() {
     snackbar.open(
         "Hello World!",
        {timer: 3}
    )
}
</script>

<button onclick="open_snackbar2()">Open Snackbar</button>
<script>
function open_snackbar2() {
     snackbar.open(
         "Hello World!",
        {timer: 3}
    )
}
</script>

You can add buttons to manually close the component, or buttons to call other functions.

To do this, add a buttons object, then close and actions.
actions is a collection of objects each with label and callback.

snackbar

<button onclick="open_snackbar3()">Open Snackbar</button>
<script>
function open_snackbar3() {
    snackbar.open(
        "Hello World!", {
            timer: 5,
            buttons: {
                close: "Close",
                actions: [{
                    label: "Ok",
                    callback: function() {
                        alert("Hello World!")
                    }
                }]
            }
        }
    )
}
</script>

<button onclick="open_snackbar3()">Open Snackbar</button>
<script>
function open_snackbar3() {
    snackbar.open(
        "Hello World!", {
            timer: 5,
            buttons: {
                close: "Close",
                actions: [{
                    label: "Ok",
                    callback: function() {
                        alert("Hello World!")
                    }
                }]
            }
        }
    )
}
</script>

snackbar

<button onclick="open_snackbar4()">Open Snackbar</button>
<script>
function open_snackbar4() {
    snackbar.open(
        "Hello World!", {
            timer: 5,
            buttons: {
                close: "Close",
                actions: [{
                    label: "Ok",
                    callback: function() {
                        alert("Hello World!")
                    }
                }]
            }
        }
    )
}
</script>

<button onclick="open_snackbar4()">Open Snackbar</button>
<script>
function open_snackbar4() {
    snackbar.open(
        "Hello World!", {
            timer: 5,
            buttons: {
                close: "Close",
                actions: [{
                    label: "Ok",
                    callback: function() {
                        alert("Hello World!")
                    }
                }]
            }
        }
    )
}
</script>

Methods	Definition
snackbar.open();	Open snackbar.
timer	Add a delay (second).
buttons : {}	Add buttons.
buttons : {close : "button_name"}	Add a close button.
buttons : {actions : [{}]}	Prepare for action buttons.
...actions : [{label:"label", callback : callback}]	Add action buttons.