NSB.Snackbar appearance and duration

1

How can we edit the appearance of the NSB.Snackbar ?
Also how can we change the setTimeout function which controls how long the Snackbar is shown for ?

An example of the dismiss timeout could be like:
NSB.Snackbar("leftText","rightText",duration);

2

The appearance and duration of the Snackbar are both hard coded, so they cannot be easily changed at runtime.

Can you explain more about what you are trying to do?

3

I want to change the css style i.e. add rounded borders, change the opacity, change the background color, change the text color, change the position and also reduce the amount of time it is shown for.

4

Here’s how to change the background color of a Snackbar:

NSB.Snackbar("This is a warning about something.", "more?", snackBarDismiss)
element = document.querySelector('.paper-snackbar');
element.style.backgroundColor = 'red';

Changing the duration will require a new build of AppStudio.

5

Thank you.

Could I write my own setTimeout function to hide it? I haven’t tested it yet but maybe something like this.

NSB.Snackbar("This is a warning about something.", "more?", snackBarDismiss)

 snackBarDismiss() {
  setTimeout(hideSN,300);
}

hideSN() {
 $(".paper-snackbar").hide();
}

For the style it seems I can add to the css like this:

.paper-snackbar {
 background: rgba(0, 0, 0, .2) ;
 border-radius: 15px;
 padding 0px;
 margin-bottom:10px;
 margin-left: 10px;
 margin-right: 10px;
 height: 2px;
 color: white;
}

/* rightText of snack bar*/
.action {
 color: white !important;
}
6

I’m not sure your approach to showing and dismissing the Snackbar will work. It would be much better if AppStudio took care of this for you. It should be in the next build, but that will be at least a few days.

If adding that CSS to the Project CSS does the job, great. That’s what Project CSS is for!

7

Ok great, thank you.