TOASTS

Giving response messages to users is really easy with JTB_MD!

How to use

jtbToasts are highly js dependable elements. To call it, you need to use the toast.js plugin of JTB_MD. So make sure that you did not exclude the plugin manually.

Once you make sure, the way of creating .jtbToast elements as follows (note that the "..." part represents the options area.):

			Copy
			$().jtbToast({...});
		

Options

You can customize your .jtbToast element with following options:

Name Type Default Description
position string 'topRight' The option that is used to define the toast position on screen: there are 6 different positions available: topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight
header string '' The option that is used to define the toast's header text.
content string '' The option that is used to define the toast's inner text.
icon string '' The option that is used to define the toast's icon. Needs to be the class of a JTB_MD icon.
image string '' The option that is used to define the toast's image. Needs to be path of the image or full URL.
duration integer 5000 The option that is used to define the toast's visibility duration. Needs to be defined as miliseconds.
dissmissable boolean true The option that is used to define the toast's closable action. Changing to false will make toast's close button disappear.
link string '' The option that is used to define the toast's link to redirect. Needs to be URL.
bgColor string '#4D5C69' The option that is used to define the toast's background color. Any hex color or JTB_MD color could be usable (like "#ffffff");

Important notes

Before using jtbToast elements, it is important to state a couple of things.

  • icon and image options, places the same area in toast element. If you want to use one of them make sure that you dont use the other one.
  • If you use dismissable with link option, the link overrides the closing button which will causes the 'closing click' redirect.
  • bgColor can be anything which represents the color itself including RGB values to HEX ones.

Examples

Once you make sure that you have set everything correct, you can call the toast elements with .jtbToast plugin.

			Copy
			$().jtbToast({
	/*------ Position -------*/
	    position: 'topRight',

	/*------ Header -------*/
	    header: 'Hello!',

	/*------ Content ------*/
	    content: 'I am a toast, and I am showing a success state!',

	/*------ Image / Icon ------*/
	    icon: 'jtb-check',
	    image: '',

	/*----- Duration -------*/
	    duration: 4000,

	/*------ Dissmissable ------*/
	    dissmissable: true,

	/*------ Link -------*/
	    link: '',

	/*------ Coloring ------*/
	    /*------- Background color ------*/
	    bgColor: 'var(--jtb_green)',
});
		

Methods

You can also use the jtbToast methods to make the toast perform an action.

Show

If you want to make a spesific jtbToast visible, you can easily call the jtbToast method with parameter show.

			Copy
			$('#toastID').jtbToast('show')
		

Hide

If you want to make a spesific jtbToast hidden, you can easily call the jtbToast method with parameter hide.

			Copy
			$('#toastID').jtbToast('hide')
		

Toggle visibility

If you want to change a spesific jtbToast's visibility, you can easily call the jtbToast method with parameter toggle.

			Copy
			$('#toastID').jtbToast('toggle')
		

Destroy

If you want to destroy a spesific jtbToast's visibility, you can easily call the jtbToast method with parameter destroy.

			Copy
			$('#toastID').jtbToast('destroy')