0.27.0 • Published 2 years ago

@material/mwc-snackbar v0.27.0

Weekly downloads
5,802
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-snackbar> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

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

npm.io

Material Design Guidelines: Snackbars

Demo

Installation

npm install @material/mwc-snackbar

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Standard

npm.io

<mwc-snackbar id="photoErrorSnackbar"
              labelText="Can't send photo. Retry in 5 seconds.">
</mwc-snackbar>

<script type="module">
  import '@material/mwc-snackbar/mwc-snackbar.js';
  const snackbar = document.querySelector('#photoErrorSnackbar');
  sendPhoto.then(...).catch(() => snackbar.show());
</script>

Optional action and dismiss button

npm.io

<mwc-snackbar labelText="Can't send photo. Retry in 5 seconds.">
  <mwc-button slot="action">RETRY</mwc-button>
  <mwc-icon-button icon="close" slot="dismiss"></mwc-icon-button>
</mwc-snackbar>

Custom action button color

npm.io

mwc-snackbar {
  --mdc-snackbar-action-color: #64dc17;
}

Variants

Stacked

Action buttons with long text should be positioned below the label instead of alongside it. Set the stacked attribute or property to enable this layout.

npm.io

Leading

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). Set the leading attribute or property to enable this layout.

API

Slots

NameDescription
actionOptional <mwc-button> which closes the snackbar with reason 'action'.
dismissOptional <mwc-icon-button> which closes the snackbar with reason 'dismiss'.

Properties/Attributes

NameTypeDescription
openbooleanWhether the snackbar is currently open.
timeoutMsnumberAutomatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 (or -1 to disable the timeout completely) or an error will be thrown. Defaults to 5000 (5 seconds).
closeOnEscapebooleanWhether the snackbar closes when it is focused and the user presses the ESC key. Defaults to false.
labelTextstringThe text content of the label element.
stackedbooleanEnables the stacked layout (see above).
leadingbooleanEnables the leading layout (see above).

Methods

NameDescription
show() => voidOpens the snackbar.
close(reason: string = '') => voidCloses the snackbar, optionally with the specified reason indicating why it was closed.

Events

NameDetailDescription
MDCSnackbar:opening{}Indicates when the snackbar begins its opening animation.
MDCSnackbar:opened{}Indicates when the snackbar finishes its opening animation.
MDCSnackbar:closing{reason?: string}Indicates when the snackbar begins its closing animation. reason contains the reason why the snackbar closed ('dismiss', 'action', or a custom string via the close method).
MDCSnackbar:closed{reason?: string}Indicates when the snackbar finishes its closing animation. reason contains the reason why the snackbar closed ('dismiss', 'action', or a custom string via the close method).

CSS Custom Properties

NameDefaultDescription
--mdc-snackbar-action-colornpm.io #bb86fcColor of the action button text.

Global CSS Custom Properties

This component exposes the following global theming custom properties.

NameDescription
--mdc-typography-body2-<PROPERTY>Styles the typography of a snackbar.

Additional references

0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.25.0

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.11.1

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago