Package Exports

@material/snackbar
@material/snackbar/constants
@material/snackbar/dist/mdc.snackbar
@material/snackbar/dist/mdc.snackbar.css
@material/snackbar/foundation
@material/snackbar/foundation.js
@material/snackbar/index
@material/snackbar/mdc-snackbar.scss

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@material/snackbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Snackbars

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

Design & API Documentation

Installation

npm install @material/snackbar

Basic Usage

HTML Structure

<div class="mdc-snackbar"
     aria-live="assertive"
     aria-atomic="true"
     aria-hidden="true">
  <div class="mdc-snackbar__text"></div>
  <div class="mdc-snackbar__action-wrapper">
    <button type="button" class="mdc-snackbar__action-button"></button>
  </div>
</div>

Styles

@import "@material/snackbar/mdc-snackbar";

JavaScript Instantiation

MDC Snackbar ships with a Component / Foundation combo which provides the API for showing snackbar messages with optional action.

import {MDCSnackbar} from '@material/snackbar';

const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));

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

Variants

Start Aligned Snackbars (tablet and desktop only)

MDC Snackbar can be start aligned (including in RTL contexts). To create a start-aligned snackbar, add the mdc-snackbar--align-start modifier class to the root element.

<div class="mdc-snackbar mdc-snackbar--align-start"
     aria-live="assertive"
     aria-atomic="true"
     aria-hidden="true">
  <div class="mdc-snackbar__text"></div>
  <div class="mdc-snackbar__action-wrapper">
    <button type="button" class="mdc-snackbar__action-button"></button>
  </div>
</div>

Additional Information

Avoiding Flash-Of-Unstyled-Content (FOUC)

If you are loading the mdc-snackbar CSS asynchronously, you may experience a brief flash-of-unstyled-content (FOUC) due to the snackbar's translate transition running once the CSS loads. To avoid this temporary FOUC, you can add the following simple style before the mdc-snackbar CSS is loaded:

.mdc-snackbar { transform: translateY(100%); }

This will move the snackbar offscreen until the CSS is fully loaded and avoids a translate transition upon load.

Style Customization

CSS Classes

CSS Class	Description
`mdc-snackbar`	Mandatory. Container for the snackbar elements.
`mdc-snackbar__action-wrapper`	Mandatory. Wraps the action button.
`mdc-snackbar__action-button`	Mandatory. The action button.
`mdc-snackbar__text`	Mandtory. The next of the snackbar.
`mdc-snackbar--align-start`	Optional. Class to align snackbar to start, ltr dependent.
`mdc-snackbar--action-on-bottom`	Optional on the mdc-snackbar element. Moves action to bottom of snackbar. Can be applied in js.
`mdc-snackbar--multiline`	Optional on the mdc-snackbar element. Makes the snackbar multiple lines. Can be applied in js.

`MDCSnackbar` Properties and Methods

Property	Value Type	Description
`dismissesOnAction`	`boolean`	Whether the snackbar dismisses when the action is clicked, or if it waits for the timeout anyway. Defaults to `true`.

Method Signature	Description
`show(data: DataObject=) => void`	Displays the snackbar. `data` populates the snackbar and sets options (see below).

DataObject Properties

Property	Type	Description
`message`	string	Mandatory. The text message to display.
`timeout`	number	The amount of time in milliseconds to show the snackbar. Defaults to `2750`.
`actionHandler`	function	The function to execute when the action is clicked.
`actionText`	string	Mandatory if `actionHandler` is set. The text to display for the action button.
`multiline`	boolean	Whether to show the snackbar with space for multiple lines of text.
`actionOnBottom`	boolean	Whether to show the action below the multiple lines of text (only applicable when `multiline` is true).

Events

Event Name	`event.detail`	Description
`MDCSnackbar:hide`	`{}`	Emitted when the Snackbar is hidden.
`MDCSnackbar:show`	`{}`	Emitted when the Snackbar is shown.

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`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the root element.
`removeClass(className: string) => void`	Removes a class from the root element.
`setAriaHidden() => void`	Sets `aria-hidden="true"` on the root element.
`unsetAriaHidden() => void`	Removes the `aria-hidden` attribute from the root element.
`setActionAriaHidden() => void`	Sets `aria-hidden="true"` on the action element.
`unsetActionAriaHidden() => void`	Removes the `aria-hidden` attribute from the action element.
`setActionText(actionText: string) => void`	Set the text content of the action element.
`setMessageText(message: string) => void`	Set the text content of the message element.
`setFocus() => void`	Sets focus on the action button.
`isFocused() => boolean`	Detects focus on the action button.
`visibilityIsHidden() => boolean`	Returns document.hidden property.
`registerBlurHandler(handler: EventListener) => void`	Registers an event handler to be called when a `blur` event is triggered on the action button.
`deregisterBlurHandler(handler: EventListener) => void`	Deregisters a `blur` event handler from the actionButton.
`registerVisibilityChangeHandler(handler: EventListener) => void`	Registers an event handler to be called when a 'visibilitychange' event occurs.
`deregisterVisibilityChangeHandler(handler: EventListener) => void`	Deregisters an event handler to be called when a 'visibilitychange' event occurs.
`registerCapturedInteractionHandler(evtType: string, handler: EventListener) => void`	Registers an event handler to be called when the given event type is triggered on the `body`.
`deregisterCapturedInteractionHandler(evtType: string, handler: EventListener) => void`	Deregisters an event handler from the `body`.
`registerActionClickHandler(handler: EventListener) => void`	Registers an event handler to be called when a `click` event is triggered on the action element.
`deregisterActionClickHandler(handler: EventListener) => void`	Deregisters an event handler from a `click` event on the action element. This will only be called with handlers that have previously been passed to `registerActionClickHandler` calls.
`registerTransitionEndHandler(handler: EventListener) => void`	Registers an event handler to be called when an `transitionend` event is triggered on the root element. Note that you must account for vendor prefixes in order for this to work correctly.
`deregisterTransitionEndHandler(handler: EventListener) => void`	Deregisters an event handler from an `transitionend` event listener. This will only be called with handlers that have previously been passed to `registerTransitionEndHandler` calls.
`notifyShow() => void`	Dispatches an event notifying listeners that the snackbar has been shown.
`notifyHide() => void`	Dispatches an event notifying listeners that the snackbar has been hidden.

@material/snackbar