MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries

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.

On this page