Snackbar

The snackbar component for brief notifications of processes that have been or will be performed.

Importing

To use the snackbar component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

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

register(); // Now the snackbar component is ready to use!

Web (Option 2)

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

registerSnackbar(); // Now the snackbar component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

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

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

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

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Snackbar } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-snackbar></tapsi-snackbar>

React

<Snackbar />

Properties

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

Methods

Name	Description	Parameters
show	Opens the snackbar if it is not already open. Dispatches a cancelable ShowEvent ("show").
hide	Closes the snackbar if it is currently open. Dispatches a cancelable HideEvent ("hide").

Slots

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

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { SnackbarSlots } from "@tapsioss/web-components";

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

React

// Option 1
import { SnackbarSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Snackbar";

Events

Name	Description	Type	Bubbles	Cancelable
show	Fires when the snackbar should be visible.	ShowEvent	❌	✅
hide	Fires when the snackbar should be hidden.	HideEvent	❌	✅

TIP

Event details are available as JavaScript variables:

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

// Option 2
import {
 SnackbarShowEvent,
 SnackbarHideEvent
} from "@tapsioss/web-components";

You can have access to the event name using the type property:

// Option 1
element.addEventListener(ShowEvent.type, handleShow);
element.addEventListener(HideEvent.type, handleHide);

// Option 2
element.addEventListener(SnackbarShowEvent.type, handleShow);
element.addEventListener(SnackbarHideEvent.type, handleHide);