2.46.0 • Published 8 months ago

@vonage/vwc-snackbar v2.46.0

Weekly downloads
-
License
ISC
Repository
github
Last release
8 months ago

vwc-snackbar

vwc-snackbar component dedicated to provide a short-time living and non intrusive / interruptive user notification.

<vwc-snackbar
	header="Header (optional)"
	message="The message of the snackbar goes here"
	icon="megaphone-solid"
	connotation="alert"
	dismissible>
	<vwc-button slot="action" layout="outlined">Show more</vwc-button>
</vwc-snackbar>

The visiblity time is set by default to 4000 ms and may be extended to maximum 10000 ms via API.

vwc-snackbar can be configured as dismissible, in which case user will be provided with a dismiss button. This won't change the auto-dismiss behaviour, but will let the user to close the snackbar even earlier.

vwc-snackbar allows to add a single action button, if needed. This is achievable via the action slot, as in example above and read more on this in API section below.

Legacy (Volta)

To have the vwc-snackbar appearance matching the legacy Volta, please use legacy attribute.

Structure

vwc-snackbar is a 'floating' component. Position of the vwc-snackbar is determined by fixed and thus relative to the viewport in vast majority of cases. Relative position (top/bottom etc), as well as snackbar's contents, are customizable.

API

Attributes / Properties

PropertyAttributeTypeDefaultDescription
positionposition"TOP-START" | "TOP-CENTER" | "TOP-END" | "BOTTOM-START" | "BOTTOM-CENTER" | "BOTTOM-END""BOTTOM-CENTER"defines the position of the snackbar
connotaionconnotation"alert" | "announcement" | "cta" | "info" | "success" | "warning""announcement"connotation color will be reflected in icon color, if present
iconiconstringundefinedicon type to show, if any
headerheaderstringundefinedheader of the message body (will be reflected in legacy flavor ONLY)
messagemessagestringundefinedmessage of the message body
dismissibledismissiblebooleanabsent (false)when property set to true (attribute present) the dismiss button will be shown
timeoutMstimeoutmsnumber (4000-10000)5000time to wait (in millis) till the snackbar auto dismiss

Methods

MethodArgumentsResultDescription
openvoidopens the snackbar
close(reason: string)voidcloses the snackbar with specified reason, if any (this reason will be passed on via the closing/closed events detail.reason)

Events

Closing events are supplied with detailed reason, which may be either action in case the action button used, or dismiss.

Therefore, although consumer might be using the own button supplied via slot (see below) to hook and act on clicks, it is a better approach to actually listen on the events of snackbar and act according the the reason supplied.

EventDetailsDescription
openingfired when the snackbar starts an opening animation
openedfirer when the snackbar full shown (post animation)
closing{ "reason": "action" | "dismiss" }fired when the snackbar starts closing animation
closed{ "reason": "action" | "dismiss" }fired when the snackbar fully closed

Customization

Beside an obvious customizations via the properties/attributes, which include the connontation color, icon, and text, consumer can provide an action button via the slot.

Slots
NameRequiredDescription
actionnoaction button, which will close the snackbar with reason 'action'

Note: in order to comply with the design, please use outlined button (in legacy mode use filled one).

2.46.0

8 months ago

2.45.0

1 year ago

2.43.0

2 years ago

2.43.2

2 years ago

2.43.1

2 years ago

2.44.0

2 years ago

2.41.0

2 years ago

2.42.0

2 years ago

2.38.0

2 years ago

2.39.1

2 years ago

2.39.0

2 years ago

2.37.2

2 years ago

2.40.0

2 years ago

2.36.3

3 years ago

2.36.2

3 years ago

2.37.0

3 years ago

2.36.0

3 years ago

2.36.1

3 years ago

2.35.0

3 years ago

2.32.0

3 years ago

2.34.0

3 years ago

2.34.1

3 years ago

2.31.0

3 years ago

2.33.1

3 years ago

2.33.0

3 years ago

2.29.0

3 years ago

2.28.1

3 years ago

2.28.0

3 years ago

2.28.2

3 years ago

2.30.2

3 years ago

2.30.1

3 years ago

2.30.3

3 years ago

2.30.0

3 years ago

2.27.1

3 years ago

2.27.0

3 years ago

2.26.0

3 years ago

2.25.10

3 years ago

2.25.9

3 years ago

2.25.8

3 years ago

2.25.7

3 years ago

2.25.6

3 years ago

2.25.5

3 years ago

2.25.3

3 years ago

2.25.2

3 years ago

2.25.1

3 years ago

2.25.0

4 years ago

2.24.1

4 years ago

2.24.0

4 years ago

2.23.0

4 years ago

2.22.1

4 years ago

2.22.0

4 years ago

2.21.1

4 years ago

2.21.0

4 years ago

2.20.1

4 years ago

2.20.0

4 years ago

2.19.0

4 years ago

2.18.1

4 years ago

2.18.0

4 years ago

2.17.0

4 years ago

2.16.1

4 years ago

2.16.0

4 years ago

2.15.0

4 years ago

2.14.0

4 years ago

2.13.0

4 years ago

2.12.0

4 years ago

2.11.0

4 years ago

2.10.0

4 years ago

2.9.1

4 years ago

2.9.0

4 years ago

2.8.0

4 years ago

2.7.0

4 years ago