twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.01k stars 78.76k forks source link

Toast Javascript handling addons #28991

Open GeoSot opened 5 years ago

GeoSot commented 5 years ago

Toasts would be handy to support a js behavior like tooltips.

A basic template (that can be changed globaly), header text, body text, option for close btn and maybe the theme color class

As of this , it would be nice if it could be configured to be positioned somewhere, fixed

Johann-S commented 5 years ago

I made a draft PR, which provide auto positioning for our toast plugin, see a demo here: https://deploy-preview-28783--twbs-bootstrap.netlify.com/docs/4.3/components/toasts/#placement

PR: #28783

is it what you want when you said?

As of this, it would be nice if it could be configured to be positioned somewhere, fixed

GeoSot commented 5 years ago

@Johann-S

something like this plus the theme-color, header, template and text You can get inspiration from Toastr demo

And could be possible to use it like


document.getElementsByTagName('body').toastr({
header:'blah-blah',
text:'blah blah blah'
theme:'info'
}).show();
tmorehouse commented 5 years ago

We've implemented SCSS to generate toast variants (based on how alert variants are created) using the theme colors:

https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/toast/_toast.scss

And the variables: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/_variables.scss

You can see them at https://deploy-preview-3891--bootstrap-vue.netlify.com/docs/components/toast#variants

We also added in an option to disable transparency of toasts (via an additional class), and to adjust the transparency level (via SCSS).

CoreOfGeek commented 4 years ago

Please check this out https://www.w3schools.com/bootstrap4/bootstrap_toast.asp