Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/mwc-snackbar

Package Overview
Dependencies
Maintainers
15
Versions
709
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/mwc-snackbar

Material Design snackbar web component

  • 0.27.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.3K
increased by21.4%
Maintainers
15
Weekly downloads
 
Created
Source

<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.

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

<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

<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

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.

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-color #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

Keywords

FAQs

Package last updated on 12 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc