Snackbar (Bootstrap 4, 5) - Revision history

Ghenne: /* Description */

2024-03-07T10:47:58Z

Description

← Older revision		Revision as of 10:47, 7 March 2024
Line 5:		Line 5:
	== Description ==		== Description ==

	Snackbars contain a single line of text directly related to the operation performed. The message stays on the screen for a few seconds, then fades away. Snackbars may contain a text action, but no icons. ~~They~~ originated in [https://en.wikipedia.org/wiki/Material_Design Google's Material Design].		Snackbars contain a single line of text directly related to the operation performed. The message stays on the screen for a few seconds, then fades away. Snackbars may contain a text action, but no icons. The concept of a Snackbar originated in [https://en.wikipedia.org/wiki/Material_Design Google's Material Design].

	The implementation is [https://codepen.io/wibblymat/pen/avAjq based on a sample] by Mat Scales.		The implementation is [https://codepen.io/wibblymat/pen/avAjq based on a sample] by Mat Scales.
Line 16:		Line 16:

	''action'' is required if you have an actionText argument. It's the name of a function to call.		''action'' is required if you have an actionText argument. It's the name of a function to call.

			The message will appear for 3 seconds. To change the duration to 5 seconds, add this to your code before you execute the call:
			<pre>
			nsb.snackbarDuration = 5000
			</pre>

	== Example ==		== Example ==

Ghenne: /* Output */

2024-02-09T17:28:22Z

Output

← Older revision		Revision as of 17:28, 9 February 2024
Line 39:		Line 39:
	</pre>		</pre>
	== Output ==		== Output ==
	~~<pre>~~		(A block near the bottom of the screen with the text)
	(~~depends on button. See nsbMsgBox sample~~)
	~~</pre>~~

	== Related Items ==		== Related Items ==

Ghenne: Ghenne moved page Snackbar (Bootstrap 4) to Snackbar (Bootstrap 4, 5)

2024-02-09T17:27:18Z

Ghenne moved page Snackbar (Bootstrap 4) to Snackbar (Bootstrap 4, 5)

← Older revision		Revision as of 17:27, 9 February 2024
(No difference)

Ghenne at 17:27, 9 February 2024

2024-02-09T17:27:01Z

← Older revision		Revision as of 17:27, 9 February 2024
Line 9:		Line 9:
	The implementation is [https://codepen.io/wibblymat/pen/avAjq based on a sample] by Mat Scales.		The implementation is [https://codepen.io/wibblymat/pen/avAjq based on a sample] by Mat Scales.

	It is ~~only~~ available for Bootstrap 4.		It is available for Bootstrap 4 and 5.

	''message'' is the primary message of the Snackbar. It can be of any length: the Snackbar will expand to show multiple lines of text.		''message'' is the primary message of the Snackbar. It can be of any length: the Snackbar will expand to show multiple lines of text.

Ghenne at 23:07, 16 October 2018

2018-10-16T23:07:38Z

@@ Line 1: / Line 1: @@
-NSB.Snackbar(message, actionText, action)
+NSB.Snackbar(''message'', ''actionText'', ''action'')
 [[File:Snackbar.png]]
 Snackbars contain a single line of text directly related to the operation performed. The message stays on the screen for a few seconds, then fades away. Snackbars may contain a text action, but no icons. They originated in [https://en.wikipedia.org/wiki/Material_Design Google's Material Design].
@@ Line 14: / Line 16: @@
 ''action'' is required if you have an actionText argument. It's the name of a function to call.

Ghenne: Created page with "NSB.Snackbar(message, actionText, action) File:Snackbar.png Snackbars contain a single line of text directly related to the operation performed. The message stays on the..."

2018-10-16T23:03:50Z

Created page with "NSB.Snackbar(message, actionText, action) File:Snackbar.png Snackbars contain a single line of text directly related to the operation performed. The message stays on the..."

New page

NSB.Snackbar(message, actionText, action)

[[File:Snackbar.png]]

Snackbars contain a single line of text directly related to the operation performed. The message stays on the screen for a few seconds, then fades away. Snackbars may contain a text action, but no icons. They originated in [https://en.wikipedia.org/wiki/Material_Design Google's Material Design].

The implementation is [https://codepen.io/wibblymat/pen/avAjq based on a sample] by Mat Scales.

It is only available for Bootstrap 4.

''message'' is the primary message of the Snackbar. It can be of any length: the Snackbar will expand to show multiple lines of text.

''actionText'' is optional. It appears in a contrasting and invites the user to take action. It could be more information, or actions like "Save", "Cancel" or "Ignore".

''action'' is required if you have an actionText argument. It's the name of a function to call.