x
Home Metronic Hire Us Buy Now
logo The World’s #1 Bootstrap 4 HTML, Angular 10, React, VueJS & Laravel
Admin Dashboard Theme
PreviewFaqDocsVideosChangelogGitHubReviewsTutorials

 

Offcanvas

Overview

KTOffcanvas is a Metronic's custom plugin defined in [metronic]/theme/html/[demo]/src/js/components/base/offcanvas.js.

Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

_offcanvasObject = new KTOffcanvas(_element, {
  baseClass: offcanvasClass,
  overlay: true,
  closeBy: 'kt_aside_close_btn',
  toggleBy: {
	target: 'kt_aside_mobile_toggle',
	state: 'mobile-toggle-active'
  }
});

Options

var options = {
  baseClass: offcanvasClass,
  overlay: true,
  closeBy: 'kt_aside_close_btn',
  toggleBy: {
	target: 'kt_aside_mobile_toggle',
	state: 'mobile-toggle-active'
  }
}
Field Type Description
overlay boolean

Enable/disable offcanvas overlay

Sample 
overlay: true
baseClass string

Set the base class for the offcanvas

Sample 
baseClass: 'kt-header-menu-wrapper'
closeBy string

Define the element for the off canvas to be closed when this element is clicked

Sample 
closeBy: 'kt_header_menu_mobile_close_btn'
toggleBy object

Define which element for the toggle and set the active state class name

Sample 
toggleBy: {
  target: 'kt_aside_mobile_toggle',
  state: 'mobile-toggle-active'
}

API Methods

Method Description
setDefaults(options)

Set default options @param options
isShown()

Check if canvas is shown @returns {boolean}
hide()

Set to hide the canvas
show()

Set to show the canvas
on(name, handler)

Attach event @param name @param handler
one(name, handler)

Attach event that will be fired once @param name @param handler