Customizing Bell

The third parameter is an Object with different types of properties from the time at which the alert will be displayed on the screen, to customizable HTML.

Changing animations and time

Animations and time are crucial stages in UX/UI and BellJs knows this, that’s why we created the screenTime, animate, expand, timeline, transitionDuration and typeAnimation properties, let’s see each one of them.

Using animations

To change the animations of Bell it is as easy as changing the typeAnimation property in the third parameter, there are different options in this case we will use the more animated bound-2 that animates a bounce in the alert.

new Bell({
title: "Bounce Alert"
},"info",{
typeAnimation: "bound-2"
}).launch()

This generates the animation in the alert, of course if they are not deactivated by the animate parameter.

Modifying the screen time

To change the screen time of the alerts you only have to modify the screenTime property, it receives a Number value that defaults to 3000, which is equal to 3 seconds.

new Bell({
title: "Alert with 5 seconds on screen"
},"info",{
screenTime: 5000
}).launch()

With this you can now modify the screen time that your alerts have, be careful the transitionDuration that you use will be added to the screenTime this means:

new Bell({
title: "Alert with 5 seconds on screen"
},"info",{
screenTime: 5000,
transitionDuration: 400
}).launch()

// Screen time will be equal to 5400

Finally we add a timeline to see how much time the alert has left before disappearing:

new Bell({
title: "Alert with 5 seconds on screen"
},"info",{
timeline:true,
screenTime: 5000,
transitionDuration: 400
}).launch()

Expand mode or not?

By default the expand mode is disabled in Bell, although it can be enabled by changing this property to true:

new Bell({
title: "With expand"
},"info",{
expand: true
}).launch()

You can use this if you want an effect similar to the Toastify library.

Different positions.

With BellJs you can use different positions at the same time without generating errors. At the moment Bell has 6 different positions

bottom-right: Shows an alert below and to the right
bottom-left: Shows an alert below and to the right
bottom-center: Shows an alert below and to the center
top-right: Shows an alert above and to the right
top-left: Shows an alert above and to the right
top-center: Shows an alert above and to the center

The code would be the following:

new Bell({
title: "Bottom right"
},"info",{
position: "bottom-right"
}).launch()

new Bell({
title: "Top left"
},"info",{
position: "top-left"
}).launch()

If you want to modify the positions a little more you can use distance that modifies the x or y axis. Depending on whether you are using the right, left, top or bottom positions. Let’s see a clear example:

new Bell({
title: "Bottom right"
},"info",{
position: "bottom-right",
distance: {
x: 0,
y: 0
}
}).launch()

With this the alert will be displayed at the bottom right, with 0 pixels of distance from the screen.