Button (Bootstrap) - Revision history

Seneca: Adding semantic headers; correcting format of code samples for adding icons to the right of button text

2024-03-06T21:44:42Z

Adding semantic headers; correcting format of code samples for adding icons to the right of button text

← Older revision		Revision as of 21:44, 6 March 2024
Line 28:		Line 28:

	[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.		[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.

			=== Add Icons to Right of Button Text ===

	When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.		When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

	~~'''In~~ Bootstrap 3~~:'''~~ Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.		==== Bootstrap 3 ====

			Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.

	<pre>		<pre>
	"<span class="pull-left">Example Button Text</span>		Button1.value = "<span class="pull-left">Example Button Text</span>"
	</pre>		</pre>

	~~'''In~~ Bootstrap 4 and ~~Bootstrap~~ 5~~:'''~~ Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., m-1, m-2, m*-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.		==== Bootstrap 4 and 5 ====

			Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., m-1, m-2, m*-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

	Add these classes to the button's class field:		Add these classes to the button's class field:
	<pre>		<pre>
	d-flex flex-row-reverse justify-content-center		Button1.class = "d-flex flex-row-reverse justify-content-center"
	</pre>		</pre>

	Add a span like the following to the button's value field. Note that mr-2 is the correct syntax for Bootstrap 4. If you are adding a Bootstrap 5 button, the class would be me-2:		Add a span like the following to the button's value field. Note that mr-2 is the correct syntax for Bootstrap 4. If you are adding a Bootstrap 5 button, the class would be me-2:
	<pre>		<pre>
	<span class="mr-2">Example Button Text</span>		Button1.value = "<span class="mr-2">Example Button Text</span>"
	</pre>		</pre>

Seneca: Added correct spacing class syntax for Bootstrap 4 and 5

2024-03-05T07:41:16Z

Added correct spacing class syntax for Bootstrap 4 and 5

← Older revision		Revision as of 07:41, 5 March 2024
Line 36:		Line 36:
	</pre>		</pre>

	'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.		'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., m-1, m-2, m*-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

	Add these classes to the button's class field:		Add these classes to the button's class field:
Line 43:		Line 43:
	</pre>		</pre>

	Add a span like ~~this~~ to the button's value field:		Add a span like the following to the button's value field. Note that mr-2 is the correct syntax for Bootstrap 4. If you are adding a Bootstrap 5 button, the class would be me-2:
	<pre>		<pre>
	<span class="mr-2">Example Button Text</span>		<span class="mr-2">Example Button Text</span>

Seneca: Updated instructions for adding icon to the right to be more clear.

2024-03-05T07:31:33Z

Updated instructions for adding icon to the right to be more clear.

← Older revision		Revision as of 07:31, 5 March 2024
Line 31:		Line 31:
	When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.		When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

	'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value ~~property~~. You can add a non-breaking space to add room between the icon and the button text.		'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value field in the Properties Grid. You can add a non-breaking space to add room between the icon and the button text.
	<pre>		<pre>
	~~Button1.value =~~ "<span class="pull-left">~~ ~~Example Button Text</span></pre>		"<span class="pull-left">Example Button Text</span>
			</pre>

	'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex ~~and~~ .flex-row-reverse ~~to the buttons class property. Use Bootstrap's justify and align classes to modify the placement of the button text~~ and ~~icon within the button (e.g~~.~~, use~~ justify-content-center to ~~center the text and icon). Add space between~~ the button ~~text and icon by adding a span around~~ the ~~text in~~ the button's value ~~property and using~~ Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text.		'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex, .flex-row-reverse, and .justify-content-center classes to the button's class field in the Properties Grid. In the button's value field in the Properties Grid, add a span with one of Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text and put some space between the button text and the icon.

			Add these classes to the button's class field:
			<pre>
			d-flex flex-row-reverse justify-content-center
			</pre>

			Add a span like this to the button's value field:
	<pre>		<pre>
	~~Button1.class = "d.flex flex-row-reverse justify-content-center"~~		<span class="mr-2">Example Button Text</span>
	~~Button1.value = "~~<span class="mr-2">Example Button Text</span>"
	</pre>		</pre>

Seneca: Added information about positioning icons in bootstrap buttons

2024-03-05T03:56:45Z

Added information about positioning icons in bootstrap buttons

← Older revision		Revision as of 03:56, 5 March 2024
Line 28:		Line 28:

	[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.		[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.

			When adding icons to buttons, icons will display to the left of the button text by default. Helper classes can be added to the button's class and value properties to place the icon to the right of the text.

			'''In Bootstrap 3:''' Add span with a class of .pull-left to the button's value property. You can add a non-breaking space to add room between the icon and the button text.
			<pre>
			Button1.value = "<span class="pull-left"> Example Button Text</span></pre>

			'''In Bootstrap 4 and Bootstrap 5:''' Add Bootstrap's .d-flex and .flex-row-reverse to the buttons class property. Use Bootstrap's justify and align classes to modify the placement of the button text and icon within the button (e.g., use justify-content-center to center the text and icon). Add space between the button text and icon by adding a span around the text in the button's value property and using Bootstrap's spacing helper classes (e.g., mr-1, mr-2, mr-3, etc.) to add a margin to the right side of the button's text.
			<pre>
			Button1.class = "d.flex flex-row-reverse justify-content-center"
			Button1.value = "<span class="mr-2">Example Button Text</span>"
			</pre>

	== Properties and Methods ==		== Properties and Methods ==

Ghenne: /* Description */

2019-11-22T19:04:25Z

Description

← Older revision		Revision as of 19:04, 22 November 2019
Line 24:		Line 24:
	<pre>		<pre>
	Button1.innerHTML = "<span id='Button1_icon' class='fa fa-bus'></span> Button"		Button1.innerHTML = "<span id='Button1_icon' class='fa fa-bus'></span> Button"
			Button1_icon.title = "New Title"
	</pre>		</pre>

Ghenne: /* Example */

2019-03-09T22:46:39Z

Example

← Older revision		Revision as of 22:46, 9 March 2019
Line 71:		Line 71:
	JavaScript=		JavaScript=
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
			// JavaScript
	Button1.onclick = function() {		Button1.onclick = function() {
	NSB.MsgBox("You can display a message or take other action when clicked");		NSB.MsgBox("You can display a message or take other action when clicked");
Line 78:		Line 79:
	BASIC=		BASIC=
	<syntaxhighlight lang="vb.net">		<syntaxhighlight lang="vb.net">
			' Basic
	Function Button1_onclick()		Function Button1_onclick()
	MsgBox "You can display a message or take other action when clicked"		MsgBox "You can display a message or take other action when clicked"

Ghenne: /* Example */

2019-03-09T21:28:26Z

Example

← Older revision		Revision as of 21:28, 9 March 2019
Line 67:		Line 67:

	== Example ==		== Example ==

	<tabber>		<tabber>
	JavaScript=		JavaScript=

Ghenne: /* Example */

2019-03-09T21:27:30Z

Example

← Older revision		Revision as of 21:27, 9 March 2019
Line 75:		Line 75:
	</syntaxhighlight>		</syntaxhighlight>
	\|-\|		\|-\|
	~~Basic~~=		BASIC=
	<syntaxhighlight lang="vb.net">		<syntaxhighlight lang="vb.net">
	Function Button1_onclick()		Function Button1_onclick()

Ghenne at 21:27, 9 March 2019

2019-03-09T21:27:05Z

@@ Line 66: / Line 66: @@
 Standard [[events|events]] are supported. For this control, the onclick event will be most useful.
-== Example (Basic) ==
+== Example ==
 <tabber>
   JavaScript=

Ghenne: /* Tab Extension Examples (for testing) */

2019-03-09T21:26:04Z

Tab Extension Examples (for testing)

@@ Line 81: / Line 81: @@
 == Tab Extension Examples (for testing) ==
 <tabber>
   JavaScript=
@@ Line 111: / Line 95: @@
 End Function
 </syntaxhighlight>
 </tabber>