@cas-smartdesign/snackbar

A highly configurable element for displaying toast notifications based on lit-element.

Attributes

• vertical-position: VerticalPosition
  • Defines the vertical anchor position of the
• horizontal-position: HorizontalPosition
  • Defines the horizontal anchor position

Properties

• verticalPosition, horizontalPosition
  • Reflects the corresponding attribute
• maxStack: number
  • Defines the max number of visible snackbar at the same time
• animationIn: AnimationParams
  • Defines the animation played when a snackbar enters the screen
• animationOut: AnimationParams
  • Defines the animation played when a snackbar leaves the screen

Public TypeScript Types

• VerticalPosition
  • Defines the possible values for the vertical position
  • Possible values: top, bottom
• HorizontalPosition
  • Defines the possible values for the horizontal position
  • Possible values: left, center, right
• ISnackbar
  • id: string
  • message: HTMLElement
  • options: ISnackbarOptions
• ISnackbarOptions
  • Defines the configurable properties
  • autoHideDuration: number
    • Defines the amount of milliseconds before auto hiding snackbar
    • If omitted then the snackbar will be persistent
  • classNames: string[]
    • Defines the classes applied to the given snackbar
    • It is useful for applying styles for specific snackbars
  • waitForMouseMove: boolean
    • Defines whether if the snackbar should wait for a mouse move before setting up the timer for auto hiding
  • closeAction: HTMLElement
    • Defines the element that goes in the action slot of the snackbar
    • This is useful for adding a close button for a persistent snackbar
  • waitOnHover: boolean
    • Defines whether if the snackbar should wait before closing it is currently being hovered on.
• AnimationParams
  • The element uses the Web Animations API for the animations, and this interface defines the parameters for the animations.
  • Properties:
    • keyframes: Keyframe[]
    • options: KeyFrameAnimationOptions

Custom CSS Properties

• --sd-snackbar-height-transition-duration: defines the duration of the collapsing animation of the snackbar which is played after the snackbar left the screen
• --sd-snackbar-vertical-offset: defines the vertical gap between the edge of the screen and the snackbar
• --sd-snackbar-horizontal-offset: defines the horizontal gap between the edge of the screen and the snackbar

Public methods

• open: (snackbar: ISnackbar) => void
  • Use for opening a snackbar
• close: (id?: string) => void
  • Use for closing snackbar(s)
  • If the id parameter is omitted then all snackbar are closed
  • If a correct id is supplied then the snackbar with that specific id is closed

Customization

• Style
  • Custom styled snackbars can be achieved by applying css to sd-snackbar and to message and action HTML elements
• Animation
  • Custom animations can be set using the Web Animations API
  • The animation played when:
    • opening a snackbar can be set by the animationIn property on the SnackbarProvider
    • closing a snackbar can be set by the animationOut property on the SnackbarProvider