<exm-snackbar>

@exmg/exm-snackbar

Snackbar element to show information and feedback based on user interaction.

Based on mwc-snackbar

Installation

npm install @exmg/exm-snackbar

Example Usage

  <exm-button unelevated @click=${() =>
    this.shadowRoot?.querySelector<ExmSnackbar>('#default-snackbar')?.show()}>
    Open default
  </exm-button>
  <exm-snackbar id="default-snackbar" labelText="Default auto close"></exm-snackbar>

API

Slots

| Name | Description | | --------- | ------------------------------------------------------------- | | icon | Icon of the snackbar | | action | Action element of the snackbar | | dismiss | Dismiss element of the snackbar, used to dismiss the snackbar |

Properties/Attributes

| Name | Type | Default | Description | | --------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | variant | string | null | Sets the Snackbar variant, options from MWC ('positive', 'negative', 'info') | | xOffset | Number | 0 | The horizontal offset of the snackbar | | yOffset | Number | 0 | The vertical offset of the snackbar | | open | boolean | Whether the snackbar is currently open. | | timeoutMs | number | Automatic 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). | | closeOnEscape | boolean | Whether the snackbar closes when it is focused and the user presses the ESC key. Defaults to false. | | labelText | string | The text content of the label element. | | stacked | boolean | Enables the stacked layout (see above). | | leading | boolean | Enables the leading layout (see above). |

Methods

| Name | Description | | ------------------------------------ | --------------------------------------------------------------------------------------- | | show() => void | Opens the snackbar. | | close(reason: string = '') => void | Closes the snackbar, optionally with the specified reason indicating why it was closed. |

Events

| Name | Detail | Description | | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 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

| Name | Default | Description | | ----------------------------- | -------------------------------------- | -------------------------------- | | --mdc-snackbar-action-color | #bb86fc | Color of the action button text. |

Additional references

• Additional Documentation

• Demo