snackbar

The snackbar function provides a simple method to utilize the <mdui-snackbar> component without the need to write HTML code.

Usage

Import the function:

import { snackbar } from 'mdui/functions/snackbar.js';

Example:

open

<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "Photo archived",
      action: "Undo",
      onActionClick: () => console.log("click action button")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

The snackbar function accepts an Options object as its parameter and returns an instance of the <mdui-snackbar> component.

Options

Property	Type	Default
`message`	`string`	-
The text to display in the snackbar.
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
The position of the snackbar. The default is `bottom`. Options include: `top`: Top, center-aligned. `top-start`: Top, left-aligned. `top-end`: Top, right-aligned. `bottom`: Bottom, center-aligned. `bottom-start`: Bottom, left-aligned. `bottom-end`: Bottom, right-aligned.
`action`	`string`	-
The text for the action button.
`closeable`	`boolean`	`false`
Whether a close button is displayed on the right side.
`messageLine`	`1 \| 2`	-
Sets the maximum number of lines for the message text. The default is unlimited. Options include: `1`: Single line. `2`: Two lines.
`autoCloseDelay`	`number`	`5000`
The delay in milliseconds before the snackbar automatically closes. Set to `0` to disable auto-close. The default is `5000` milliseconds (5 seconds).
`closeOnOutsideClick`	`boolean`	`false`
Whether the snackbar should close on outside clicks or touches.
`queue`	`string`	-
The queue name. By default, the queue is not enabled. If this function is called multiple times, multiple snackbars will be displayed simultaneously. If a queue name is provided, snackbars with the same queue name will open sequentially, each after the previous one closes.
`onClick`	`(snackbar: Snackbar) => void`	-
Callback invoked when the snackbar is clicked. The snackbar instance is passed as a parameter and is also the context of `this`.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Callback invoked when the action button is clicked. The snackbar instance is passed as a parameter and is also the context of `this`. By default, the snackbar closes when the action button is clicked. Return `false` to prevent this. If a promise is returned, the snackbar closes once the promise resolves.
`onOpen`	`(snackbar: Snackbar) => void`	-
Callback invoked when the snackbar starts to open. The snackbar instance is passed as a parameter and is also the context of `this`.
`onOpened`	`(snackbar: Snackbar) => void`	-
Callback invoked when the snackbar opening animation completes. The snackbar instance is passed as a parameter and is also the context of `this`.
`onClose`	`(snackbar: Snackbar) => void`	-
Callback invoked when the snackbar starts to close. The snackbar instance is passed as a parameter and is also the context of `this`.
`onClosed`	`(snackbar: Snackbar) => void`	-
Callback invoked when the snackbar closing animation completes. The snackbar instance is passed as a parameter and is also the context of `this`.

prompt

Up Next

getTheme