TOC => Offcanvas

Offcanvas

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

This widget implements the native BootStrap Off-Canvas control. In addition to the button rendered by the widget, the Off-Canvas area can be triggered via a Shortcode in your content, or by a custom anchor tag.

Left OC Area
Left OC Area

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Right OC Area
Right OC Area

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Top OC Area
Top OC Area

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Bottom OC Area
Bottom OC Area

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

The OffCanvas Admin Panel

This panel allows you to configure and add content to your OffCanvas widget.


   Title

   The internal name of the OC Area. It will be rendered as the Button text, and as the header of the OC Area

   Placement

   Select location of the OC Area: Left, Right, Top or Bottom.

   Render Button

   Checking this control will cause the OC widget to render a button to trigger the visibility of the off screen content.

   Render Backdrop

   Checking this control will cause the main page to dim. Only the OffCanvas Area will be active until it is dismissed.

   Enable Scrolling

   Checking this control will allow the user to scroll the page behind the OffCanvas Area.

   Content List

   The add (+) button at the bottom will allow you to add either a Container widget or a Liquid widget 

  • You may rearrange the widgets by using the Drag-and-drop handles on the left of each section
  • You may delete a widget by selecting its red trashcan icon
  • You may open a widget for editing by selecting the > button just to the left of its title (Container widgets and Liquid widgets are discussed on their own pages)

Triggering your OffCanvas Area

As stated above, there are three ways to trigger the visibility of an OffCanvas Area: the built in button, a ShortCode embedded in your content, or a custom URL you write & put into the HTML editor yourself.

The built-in button is discussed in the Admin Panel section above. The other two methods are described below:

     Via the [offcanvas] ShortCode

     If you are working in an HTML area, you may add a link to trigger an OC Area with the [offcanvas] shortcode.

     The easiest way to embed the shortcode is to click the Insert Shortcode button on the HTML editor's toolbar. It will embed the default code into your document:

     [offcanvas target="target OC area name"]link text[/offcanvas]

  • Change the target attribute to the name of the OC area you wish to control
  • Change the link text to the text you want rendered in document

     Via a Custom URL

     You may also trigger the Offcanvas area using an HTML anchor tag. The href and data-bs-toggle attributes of the tag must be set correctly in order to call the BootStrap eventhandler. For Example:

	<a href="#OC_Page_Contents" data-bs-toggle="offcanvas">Tag Title</a>

      HREF

     The href atribute should be set to the name of the target Offcanvass area you want to trigger.
     Replace any spaces in the name with an underscore ( _ ) character. You must also prepend the name with #OC_ .  (In the example above, the name of the target OC is 'Page Contents', so the href string should be: #OC_Page_Contents).

      data-bs-toggle

     Add the attribute/value of data-bs-toggle="offcanvas" to the anchor tag.

      Tag Title

     Standard rules apply. The Tag Title will be rendered as the link text.


Page Contents
Back to TOC

The Offcanvas Widget

add more things