@toujou/toujou-snackbar
v3.8.3
Published
The toujou-snackbar package of toujou ui components
Downloads
5
Readme
Toujou Snackbar
The toujou snackbar element is a way to provide brief messages / acknowledgements to the user.
It may or may not require an action from the user.
We can customize the toujou-snackbar
type ('auto' or 'action'), message, duration and button properties, and use it with one of the available variants (default
. success
, warning
, error
, info
).
Installation
npm install @toujou/toujou-snackbar
Events
add-snackbar
event
The toujou-snackbar element is triggered via the add-snackbar
custom event (which can be dispatch by any other elements).
The add-snackbar
event needs:
| Property | Type | Description | Accepted Values | Default | Required by |
|----------|------|-------------|-----------------|---------|-------------|
| message
| String | Text that will be displayed in the snackbar | - | - | Always |
| type
| String | This defines if the snackbar needs action from the user of if is temporary | 'action', 'auto' | - | always |
| buttonText
| String | Defines the text on the button | - | 'OK' | action' |
| duration
| Number | Number of milliseconds to show the snackbar | - | 3000 | 'auto' |
| variant
| String | Name of variant to use | 'success', 'warning', 'error', 'info' | - | - |
Examples of add-snackbar
custom events
'Auto' Snackbar.
'Auto' Snackbars are dismissed automatically after a certain amount of time. The suggested values are between 3 and 10 seconds.
const addSnackbarEvent = new CustomEvent('add-snackbar', {
bubbles: true,
composed: true,
detail: {
message: `welcome to the bonus page!`,
type: 'auto',
duration: 4000,
variant: 'success'
}
})
'Action' Snackbar.
'Action' Snackbars are not dismissed automatically. The user needs to take action to dismiss them.
const addSnackbarEvent = new CustomEvent('add-snackbar', {
bubbles: true,
composed: true,
detail: {
message: `Settings saved!`,
type: 'action',
buttonText: 'Dismiss'
}
})
Custom CSS properties
We can style the toujou-snackbar element by using custom css properties
Style the toujou-snackbar
element:
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-bg-color | Set background-color
of the element | #2c2c2c |
| --toujou-snackbar-border | Set border
of the element | 1px solid --bg-color |
| --toujou-snackbar-display | Set display
of the element | flex |
| --toujou-snackbar-width | Set width
of the element | calc(100% - 2rem) |
| --toujou-snackbar-max-width | Set max-width
of the element | 640px |
| --toujou-snackbar-position | Set position
of the element | fixed |
| --toujou-snackbar-bottom | Set bottom
of the element | 1rem |
| --toujou-snackbar-left | Set left
of the element | 1rem |
| --toujou-snackbar-padding | Set padding
of the element | 1rem |
| --toujou-snackbar-border-radius | Set border-radius
of the element | .25rem |
| --toujou-snackbar-z-index | Set z-index
of the element | 100 |
| --toujou-snackbar-transform | Set transform
of the element | translateY(calc(100% - 1rem)) |
| --toujou-snackbar-opacity | Set opacity
of the element | 0 |
| --toujou-snackbar-transition | Set transition
of the element | all .25s ease-out |
Style the toujou-snackbar[visible]
:
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-visible-transform | Set transform
of the element with visible
attribute | translateY(0) |
| --toujou-snackbar-visible-opacity | Set opacity
of the element with visible
attribute | 1 |
Style the .snackbar__message
inside the toujou-snackbar
element
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-message-grow | Set flex-grow
of the .snackbar__message
| 1 |
| --toujou-snackbar-message-color | Set color
of the .snackbar__message
| white |
| --toujou-snackbar-message-margin | Set margin
of the .snackbar__message
| 0 |
| --toujou-snackbar-message-padding | Set padding
of the .snackbar__message
| 0 1rem 0 0 |
Style the .snackbar__button
inside the toujou-snackbar
element
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-button-border | Set border
of the .snackbar__button
| none |
| --toujou-snackbar-button-bg | Set background
of the .snackbar__button
| none |
| --toujou-snackbar-button-font-size | Set font-size
of the .snackbar__button
| .875rem |
| --toujou-snackbar-button-text-transform | Set text-transform
of the .snackbar__button
| uppercase |
| --toujou-snackbar-button-color| Set color
of the .snackbar__button
| --primary-color |
| --toujou-snackbar-button-margin | Set margin
of the .snackbar__button
| 0 |
| --toujou-snackbar-button-outline | Set outline
of the .snackbar__button
| none |
Style the .snackbar__button:hover
inside the toujou-snackbar
element
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-button-hover-cursor | Set cursor
of the .snackbar__button:hover
| pointer |
| --toujou-snackbar-button-hover-opacity | Set opacity
of the .snackbar__button:hover
| .75 |
Variants
The toujou-snackbar
element has 5 variants: default
, success
, warning
, error
and info
.
To choose the variant you want to use you just need to add the variant
property to the add-snackbar
custom event.
If there is no variant
property, the default
variant will be used.
Variant styles
You can also customize some variant styles using custom CSS variables.
Success Variant
Should be used to show a success message to the user, for instance a 'successfully saved' message.
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-success-border | Set border
of the toujou-snackbar[success]
| 1px solid --success-color |
| --toujou-snackbar-success-message-color | Set color
of the toujou-snackbar[success] .snackbar__message
| --success-color |
| --toujou-snackbar-success-button-color | Set color
of the toujou-snackbar[success] .snackbar__button
| white |
Warning Variant
Should be used to show a warning message to the user, for instance a 'your consent expires tomorrow' message
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-warning-border | Set border
of the toujou-snackbar[warning]
| 1px solid --warning-color |
| --toujou-snackbar-warning-message-color | Set color
of the toujou-snackbar[warning] .snackbar__message
| --warning-color |
| --toujou-snackbar-warning-button-color | Set color
of the toujou-snackbar[warning] .snackbar__button
| white |
Error Variant
Should be used to show an error message to the user, for instance 'there was an error while saving your settings' message
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-error-border | Set border
of the toujou-snackbar[error]
| 1px solid --error-color |
| --toujou-snackbar-error-message-color | Set color
of the toujou-snackbar[error] .snackbar__message
| --error-color |
| --toujou-snackbar-error-button-color | Set color
of the toujou-snackbar[error] .snackbar__button
| white |
Info Variant
Should be used to show an information message to the user, for instance 'there is a new update available'
| Property | Description | Default |
|----------|-------------|---------|
| --toujou-snackbar-info-border | Set border
of the toujou-snackbar[info]
| 1px solid #81d4fa |
| --toujou-snackbar-info-message-color | Set color
of the toujou-snackbar[info] .snackbar__message
| #81d4fa |
| --toujou-snackbar-info-button-color | Set color
of the toujou-snackbar[info] .snackbar__button
| white |