0.0.7 ā€¢ Published 3 years ago

ackbar-snackbar v0.0.7

Weekly downloads
294
License
MIT
Repository
github
Last release
3 years ago

šŸ“¦ \

A small, very easy to use and highly customisable snackbar component to use on any project.

ackbar-snackbar It's a trap

šŸ• Try it out on the Ackbar Snackbar Sandbox

ackbar-snackbar_demo

šŸ“– Table of Contents

šŸŒˆ Installation

npm i ackbar-snackbar

šŸš€ Getting Started

  1. Import the module into your project

    • You can add it to an html file
      <script src="node_modules/ackbar-snackbar/dist/index.js"></script>
    • or import it on a JS file
     import 'ackbar-bar.js';
  2. Add the element to your page (for instance as the last element before the </body>)

    <ackbar-snackbar></ackbar-snackbar>
  3. To create a snackbar dispatch a ackbar-snackbar-add event from any element on your page

    const snackbarOptions = {
        duration: 4000,
        message: `This is an awesome snackbar`,
        variant: 'success'
    }
    
    window.dispatchEvent(new CustomEvent('ackbar-snackbar-add', {
        bubbles: true,
        composed: true,
        detail: snackbarOptions
    }));

šŸ‘·ā€ā™‚ļø Options

There are several options that you can customize when you create a snackbar.

To set any option, just pass it into the snackbar options object in the ackbar-snackbar-add event. For instance to set a custom animation name:

window.dispatchEvent(new CustomEvent('ackbar-snackbar-add', {
  bubbles: true,
  composed: true,
  detail: {
    message: `This is an awesome snackbar`,
    animationName: 'slide-in',
  }
}));

If an option isn't passed in the options object, the default value will be used.

Animation Duration

Set the duration of the show and hide animations (in milliseconds).

Option NameDefaultTypeRequired
animationDuration500Numberno

Example:

// Set custom animation duration
const snackbarOptions = {
  message: 'This is the snackbar message',
  animationDuration: 1000
}

Animation Name

Choose which animation you want to use to show / hide the snackbar

Option NamePossible valuesDefaultTypeRequired
animationName'default', 'slide-in', 'zoom''default'Stringno

Example:

// Set custom animation name
const snackbarOptions = {
  message: 'This is the snackbar message',
  animationName: 'slide-in'
}

Button Callback

You can specify a callback function that will be called when the snackbar button is clicked

Option NameDefaultTypeRequired
buttonCallbacknullFunctionno

Example:

// Set a custom callback function
const snackbarOptions = {
  message: 'This is a snackbar message',
  buttonCallback() { console.log('Hello World') }
}

Button Text

Set the text to be displayed on the snackbar button.

Option NameDefaultTypeRequired
buttonTextnullStringno

Example:

// Set custom button text
const snackbarOptions = {
  message: 'This is a snackbar message',
  buttonText: 'OK'
}

Custom Classes

Add custom classes to the snackbar element

Option NameDefaultTypeRequired
customClassesnullStringno

Example:

// Set custom classes
const snackbarOptions = {
  message: 'This is a super cool snackbar message',
  customClasses: 'my-class my-other-class'
}

Duration

Set how long the auto snackbar (refer to type) will be displayed (in milliseconds).

Option NameDefaultTypeRequired
duration4000Numberno

Example:

// Set custom duration
const snackbarOptions = {
  message: 'This is a snackbar message',
  duration: 8000
}

Hide Callback

You can specify a callback function that will be called when the snackbar hide animation finishes

Option NameDefaultTypeRequired
hideCallbacknullFunctionno

Example:

// Set a custom callback function
const snackbarOptions = {
  message: 'This is a snackbar message',
  hideCallback() { console.log('Snackbar closed') }
}

Message

Set the message that will be shown on the snackbar.

Option NameDefaultTypeRequired
message'Ackbar snackbar: It's a snackbar'Stringyes

Example:

// Set custom duration
const snackbarOptions = {
  message: 'This is a super cool snackbar message',
}

Show Callback

You can specify a callback function that will be called when the snackbar show animation finishes

Option NameDefaultTypeRequired
showCallbacknullFunctionno

Example:

// Set a custom callback function
const snackbarOptions = {
  message: 'This is a snackbar message',
  showCallback() { console.log('Snackbar opened') }
}

Type

Set the type to choose between a snackbar that is automatically dismissed or a snackbar that stays visible until the user clicks the dismiss button.

Option NamePossible valuesDefaultTypeRequired
type'auto', 'dismiss''auto'Stringno

Example:

// Set custom duration
const snackbarOptions = {
  message: 'This is a super cool snackbar message',
  type: 'dismiss'
}

Variant

Choose one of the different snackbar variants to set the snackbar "style" (background-color, ...).

Option NamePossible valuesDefaultTypeRequired
variant'default', 'success', 'warning', 'error', 'info''default'Stringno

Example:

// Set custom duration
const snackbarOptions = {
  message: 'This is a super cool snackbar message',
  type: 'dismiss'
}

Size

Set the size of the snackbar

Option NamePossible valuesDefaultTypeRequired
size'small', 'normal', 'large''normal'Stringno

Example:

// Set custom duration
const snackbarOptions = {
  message: 'This is a super cool snackbar message',
  size: 'small'
}

āœļø Attributes

You can also set some attributes directly on the element.

Position

Set the position of the snackbars inside the browser window

Attribute NamePossible valuesDefaultTypeRequired
position'top left', 'top center', 'top right', 'middle left', 'middle center', 'middle right', 'bottom left', 'bottom center', 'bottom right''bottom left'Stringno

Example:

<!-- set snackbar container position -->
<ackbar-snackbar position="top right"></ackbar-snackbar>

āœØ CSS Variables

You can further customize the snackbars by adding your custom styles using the available custom CSS Variables

Example:

/* Add to your css */
acbar-snackbar {
    --ackbar-color-success: green;
}

Variables

CSS Variable NameDescriptionDefault
--ackbar-color-bgBackground color of the default snackbarrgb(53, 53, 53)
--ackbar-color-successBackground color of the success variant snackbarrgb(105, 199, 109)
--ackbar-color-errorBackground color of the error variant snackbarrgb(234, 94, 94)
--ackbar-color-warningBackground color of the warning variant snackbarrgb(241, 153, 78)
--ackbar-color-infoBackground color of the info variant snackbarrgb(47, 162, 255)
--ackbar-color-textMessage text color on success, error, warning and info variantsrgb(255, 255, 255)
--ackbar-color-button-defaultButton text colorrgb(149, 104, 228)
--ackbar-color-button-backgroundButton background colortransparent
--ackbar-color-button-background-hoverButton background color on hoverrgba(0, 0, 0, .1)
--ackbar-padding-normalSnackbar padding1rem
--ackbar-button-paddingPadding on the snackbar button0.125rem 0.5rem
--ackbar-spacing-normalSpacing between snackbars.25rem
--ackbar-marginsContainer's distance to page border1rem
--ackbar-widthSnackbar width25rem
--ackbar-max-widthSnackbar maximal widthcalc(100vw - calc(var(--ackbar-margins) * 4))
--ackbar-line-heightLine height1.2
--ackbar-button-opacitySet the button's opacity.75
--ackbar-button-opacity-hoverSet the button's opacity on hover1
--ackbar-base-font-sizeBase font size for the snackbar elements1rem
--ackbar-radius-normalBorder-radius (on the snackbar and the button).25rem
--ackbar-opacityOpacity of the component1
--ackbar-grid-gapSet gap between the message and the button1rem
--ackbar-box-shadowSet the box-shadow on each snackbarnone