Snackbar

The snackbar component.

• Import

  import "@tapsioss/web-components/snackbar";

• Tag

  <tapsi-snackbar></tapsi-snackbar>

Properties

Name	Description	Type	Default Value
open	Indicates whether the snackbar is open or not.	boolean	false
dismissible	Indicates whether the snackbar can be dismissed.	boolean	false
text	Sets the text of the snackbar.	string	""
duration	The time before the snackbar automatically closes (in milliseconds).	number	-1
color	The color of the snackbar, indicating the type of message. Defaults to inverse.	"success" | "error" | "info" | "warning" | "inverse"	"inverse"

Slots

Name	Description
icon	The slot for icon when color is inverse.

TIP

You can use slot names as variables:

import { Slots } from "@tapsioss/web-components/snackbar";

console.log(Slots.ICON); // "icon"

Events

Name	Description	Type
show	Fires when the snackbar should be visible. (Cancelable)	ShowEvent
hide	Fires when the snackbar should be hidden. (Cancelable)	HideEvent

TIP

You can import custom event names:

import { 
  ShowEvent,
  HideEvent
} from "@tapsioss/web-components/snackbar";

element.addEventListener(ShowEvent.type, handleTapsiSnackbarShow);
element.addEventListener(HideEvent.type, handleTapsiSnackbarHide);