BitSnackbar Control-Panel

Quick Start

Name Control
Default Snackbar
Built-in Snackbar

Global Options

Name Type Default Control Descriptions
bgColor string #323232 Snackbar background color. Color options such as hex and rgb
position string top-center Combinations of top or bottom with left, right, or center values to set the snackbar's position. eg. top-center, bottom-right
opacity number 1 Snackbar opacity. Decimal values between 0 and 1
margin string 10px Snackbar margin. px, Size elements like px, em, rem
width string auto Snackbar width. On screens larger than 640px, the max width is set to 568px.
duration number 3500 Snackbar presentation time on the screen. 1000 = 1s
autoHide boolean true Snackbar presentation time on the screen. 1000 = 1s
showHeader boolean false Visibility of the header area
showAction boolean true Visibility of the header area

Header Options

Name Type Default Control Descriptions
headerColor string null Background color of the header area Four predefined colors:
info, success, warning, and danger
Additionally, colors such as hex and rgb can be applied.
headerLabel string null Text to be displayed in the header
headerLabelColor string #FFFFFF Header label color Four predefined colors: info, success, warning, and danger
Additionally, colors such as hex and rgb can be applied.
headerLabelBgColor string null Background color of the header label Four predefined colors:
info, success, warning, and danger
Additionally, colors such as hex and rgb can be applied.
headerlcon string null Built-in icons displayed in the header area. There are five icons:
info, success, warning, danger and question. By adding '_colored' (e.g., info_colored), you can insert icons in predefined colors except the question button. The default icons without color are white.

Message Options

Name Type Default Control Descriptions
title string null Title text. The default setting is not to display.
titleFontColor string #FFFFFF Colors such as hex and rgb can be applied.
titleFontSize string 16px Size elements like px, em, rem
titleAlign string left Title horizontal alignment. There are three options: left, center, and right
message string No Message Main snackbar message.
messageFontColor string #FFFFFF Colors such as hex and rgb can be applied.
messageFontSize string 14px Size elements like px, em, rem
messageAlign string left Message horizontal alignment. There are three options: left, center, and right.

Action Options

Name Type Default Control Descriptions
icon string close Two built-in icons are available: close and arrow_down.
label string null Action label.
color string #4caf50 Action label font color. Colors such as hex and rgb can be applied.
fontSize string inherit Action label font size. Size elements like px, em, rem

Event

Name Type Default Control Descriptions
onClose function null Event will execute after the BitSnackbar has closed (disappeared from the screen).