OffCanvas (Bootstrap 5) - Revision history

Ghenne: /* Properties and Methods */

2025-09-03T15:19:59Z

Properties and Methods

← Older revision		Revision as of 15:19, 3 September 2025
Line 54:		Line 54:
	{\| class="wikitable"		{\| class="wikitable"
	\|-		\|-
	\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed~~. In Bootstrap 4, aligned right~~. Design Time and Runtime.		\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. Design Time and Runtime.
	\|-		\|-
	\| header \|\| The heading in the control. Leave blank for none. HTML is allowed. Design Time and Runtime.		\| header \|\| The heading in the control. Leave blank for none. HTML is allowed. Design Time and Runtime.

Ghenne: /* Description */

2025-09-03T14:58:46Z

Description

← Older revision		Revision as of 14:58, 3 September 2025
Line 5:		Line 5:
	An OffCanvas control displays a panel of information over part of your your app. It can be positioned at the top, bottom, left or right. It can contain a header, detail or footers. By default, it is hidden, so it cannot be seen in the Design Screen. It needs to opened using its toggle function.		An OffCanvas control displays a panel of information over part of your your app. It can be positioned at the top, bottom, left or right. It can contain a header, detail or footers. By default, it is hidden, so it cannot be seen in the Design Screen. It needs to opened using its toggle function.

	Since it does not display on the Design Screen, it can be difficult to edit. To add a control to a Modal, drag it anywhere onto the Design Screen. Then, in the Project Explorer, cut the new control and paste it into the Modal.		Since it does not display on the Design Screen, it can be difficult to edit. To add a control to a Modal, drag it anywhere onto the Design Screen. Then, in the Project Explorer window, cut the new control and paste it into the Modal.

	Make it the bottom control in the list of controls in the Project Explorer. That will it will float over the other controls without affecting their placement.		Make it the bottom control in the list of controls in the Project Explorer. That will it will float over the other controls without affecting their placement.

Ghenne: /* Properties and Methods */

2022-10-31T21:14:57Z

Properties and Methods

← Older revision		Revision as of 21:14, 31 October 2022
Line 53:		Line 53:
	Standard [[properties and methods\|properties]] are supported, plus:		Standard [[properties and methods\|properties]] are supported, plus:
	{\| class="wikitable"		{\| class="wikitable"
	\|-
	~~\| badge \|\| Adds a Badge to the control. Design Time and Runtime.~~
	\|-		\|-
	\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. In Bootstrap 4, aligned right. Design Time and Runtime.		\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. In Bootstrap 4, aligned right. Design Time and Runtime.
	\|-		\|-
	\| ~~footerAlign~~ \|\| ~~Alignment of footer contents~~. ~~left, center or right~~. Design ~~time~~.		\| header \|\| The heading in the control. Leave blank for none. HTML is allowed. Design Time and Runtime.
	\|-		\|-
	\| ~~header~~ \|\| ~~The heading in~~ the control. ~~Leave blank for none. HTML~~ is ~~allowed~~. ~~Design Time and Runtime~~.		\| position \|\| Where to show the control. Default is left. Can be left, right, top or bottom.
	\|-		\|-
	\| size \|\| Size of Modal control. small, medium or large.		\| size \|\| Size of Modal control. small, medium or large.

Ghenne at 21:12, 31 October 2022

2022-10-31T21:12:18Z

← Older revision		Revision as of 21:12, 31 October 2022
Line 1:		Line 1:
	[[File:Bsoffcanvas1.png]]		[[File:Bsoffcanvas1.png\|border]]

	== Description ==		== Description ==

Ghenne at 21:11, 31 October 2022

2022-10-31T21:11:36Z

← Older revision		Revision as of 21:11, 31 October 2022
Line 1:		Line 1:
	[[~~file~~:Bsoffcanvas1~~.png]] [[file:Bsoffcanvas2~~.png]]		[[File:Bsoffcanvas1.png]]

	== Description ==		== Description ==

Ghenne at 21:07, 31 October 2022

2022-10-31T21:07:27Z

← Older revision		Revision as of 21:07, 31 October 2022
Line 1:		Line 1:
	~~placeholder~~		[[file:Bsoffcanvas1.png]] [[file:Bsoffcanvas2.png]]

			== Description ==

			An OffCanvas control displays a panel of information over part of your your app. It can be positioned at the top, bottom, left or right. It can contain a header, detail or footers. By default, it is hidden, so it cannot be seen in the Design Screen. It needs to opened using its toggle function.

			Since it does not display on the Design Screen, it can be difficult to edit. To add a control to a Modal, drag it anywhere onto the Design Screen. Then, in the Project Explorer, cut the new control and paste it into the Modal.

			Make it the bottom control in the list of controls in the Project Explorer. That will it will float over the other controls without affecting their placement.

			It can also act as a container for child controls.

			Keep its width set to 'auto'. Bootstrap will size it properly. Do not set the screenMode of the containing Form to Zoom.

			'''Modal Options'''

			{\| class="wikitable"
			\|-
			\| backdrop
			\| Includes a offcanvas-backdrop element. true/false/static (for a backdrop which doesn't close the offcanvas on click.)
			\|-
			\| focus
			\| Puts the focus on the offcanvas when initialized. Default is true
			\|-
			\| keyboard
			\| Closes the offcanvas when escape key is pressed. Default is true. If set to false, the close X does not appear.
			\|-
			\| show
			\| Shows the offcanvas when initialized. Default is true
			\|}

			Sample code to modify Modal Options:
			<pre>
			parms = {}
			parms.backdrop = "static"
			parms.keyboard = false
			parms.show = false
			$("#OffCanvas1").offcanvas(parms)
			</pre>

			Sample code to modify the appearance of a Modal:
			<pre>
			tmp = OffCanvas1_header.innerHTML
			tmp = tmp.substr(0, tmp.indexOf("</h4>") + 5)
			OffCanvas1_header.innerHTML = tmp
			OffCanvas1_header.style.justifyContent = "center"
			OffCanvas1_title.style.textAlign = "center"
			OffCanvas1_body.style.alignSelf = "center"
			</pre>

			== Properties and Methods ==

			Standard [[properties and methods\|properties]] are supported, plus:
			{\| class="wikitable"
			\|-
			\| badge \|\| Adds a Badge to the control. Design Time and Runtime.
			\|-
			\| footer \|\| The text on the bottom. Leave blank for none. HTML is allowed. In Bootstrap 4, aligned right. Design Time and Runtime.
			\|-
			\| footerAlign \|\| Alignment of footer contents. left, center or right. Design time.
			\|-
			\| header \|\| The heading in the control. Leave blank for none. HTML is allowed. Design Time and Runtime.
			\|-
			\| size \|\| Size of Modal control. small, medium or large.
			\|-
			\| toggle() \|\| Show or hide the Modal panel.
			\|-
			\| value \|\| The text in the center of the control. Leave blank for none. HTML is allowed. In Bootstrap 4, text will scroll if needed. Design Time and Runtime.
			\|}

			== Events ==

			Standard [[events\|events]] are supported.

			== Example ==

			<tabber>
			JavaScript=
			<syntaxhighlight lang="JavaScript">
			// JavaScript
			Button1.onclick = function() {
			OffCanvas1.toggle();
			};
			</syntaxhighlight>
			\|-\|
			BASIC=
			<syntaxhighlight lang="vb.net">
			' Basic
			Function Button1_onclick()
			OffCanvas1.toggle()
			End Function
			</syntaxhighlight>
			</tabber>

			== Output ==


			[[Category:Language Reference]]

			[[Category:Controls]]

			[[Category:Bootstrap]]

Ghenne: Created page with "placeholder"

2022-10-31T18:33:46Z

Created page with "placeholder"

New page

placeholder