@loipham/material-snackbar v14.0.4

Snackbars

Snackbars provide brief messages about app processes at the bottom of the screen.

Design & API Documentation

Installation

npm install @loipham/material-snackbar

Basic Usage

HTML Structure

<aside class="mdc-snackbar">
  <div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
    <div class="mdc-snackbar__label" aria-atomic="false">
      Can't send photo. Retry in 5 seconds.
    </div>
    <div class="mdc-snackbar__actions" aria-atomic="true">
      <button type="button" class="mdc-button mdc-snackbar__action">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Retry</span>
      </button>
    </div>
  </div>
</aside>

Styles

@use "@loipham/material-snackbar/mdc-snackbar";

JavaScript Instantiation

import {MDCSnackbar} from '@loipham/material-snackbar';
const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));

See Importing the JS component for more information on how to import JavaScript.

Variants

Stacked

Action buttons with long text should be positioned below the label instead of alongside it. This can be accomplished by adding the mdc-snackbar--stacked modifier class to the root element:

<aside class="mdc-snackbar mdc-snackbar--stacked">
  ...
</aside>

Alternatively, you can call the layout-stacked mixin from Sass:

@use "@loipham/material-snackbar";

@media (max-width: snackbar.$mobile-breakpoint) {
  .my-snackbar {
    @include snackbar.layout-stacked;
  }
}

Leading (tablet and desktop only)

By default, snackbars are centered horizontally within the viewport.

On larger screens, they can optionally be displayed on the leading edge of the screen (the left side in LTR, or the right side in RTL) by adding the mdc-snackbar--leading modifier class to the root element:

<aside class="mdc-snackbar mdc-snackbar--leading">
  ...
</aside>

Alternatively, you can call the position-leading mixin from Sass:

@media (min-width: snackbar.$mobile-breakpoint) {
  .my-snackbar {
    @include snackbar.position-leading;
  }
}

Wide (tablet and desktop only)

To increase the margins between the snackbar and the viewport on larger screens, call the viewport-margin mixin inside a media query:

@media (min-width: snackbar.$mobile-breakpoint) {
  .my-snackbar {
    @include snackbar.viewport-margin(snackbar.$viewport-margin-wide);
  }
}

Style Customization

CSS Classes

Sass Mixins

NOTE: The mdc-snackbar__action and mdc-snackbar__dismiss elements can be further customized with mdc-button and mdc-icon-button mixins.

JavaScript API

MDCSnackbar Properties

NOTE: Setting labelText while the snackbar is open will cause screen readers to announce the new label. See Screen Readers below for more information.

MDCSnackbar Methods

Events

Usage Within Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Snackbar for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCSnackbarAdapter Methods

MDCSnackbarFoundation Methods

Event Handlers

When wrapping the Snackbar foundation, the following events must be bound to the indicated foundation methods:

The Util API

External frameworks and libraries can use the following utility methods from the util module when implementing their own component.

Alternatively, frameworks can use Closure Library's goog.a11y.aria.Announcer#say() method.

Accessibility

Screen Readers

Snackbars automatically announce their label text to screen reader users with a "polite" notification when open() is called.

However, screen readers only announce ARIA Live Regions when the element's textContent changes, so MDC Snackbar provides a util.announce() method to temporarily clear and then restore the label element's textContent.

NOTE: Setting labelText while the snackbar is open will cause screen readers to announce the new label.

util.announce() supports the latest versions of the following screen readers and browsers:

• ChromeVox
• NVDA:
  • Chrome
  • Firefox
  • IE 11
• JAWS:
  • Chrome
  • Firefox
  • IE 11

macOS VoiceOver is not supported at this time.

Dismiss Icon

Snackbars are intended to dismiss on their own after a few seconds, but a dedicated dismiss icon may be optionally included as well for accessibility purposes.

Dismiss Key

Pressing the ESC key while one of the snackbar's child elements has focus (e.g., the action button) will dismiss the snackbar.

To disable this behavior, set closeOnEscape to false.

No JS Ripples

The mdc-snackbar__action and mdc-snackbar__dismiss elements should not have JavaScript-enabled MDCRipple behavior.

When combined with the snackbar's exit animation, ripples cause too much motion, which can be distracting or disorienting for users.