Docs v1.1.0  /  Layout helpers HTML5 Angular Vue.js Laravel Laravel + Vue.js Rails ASP.NET Core 2 ASP.NET MVC
OTHER
Settings panel

Layout helpers allow you to easily set layout options and get current layout info.

Usage

Include layout-helpers.js script in the <head> section of the main layout. Then you can use helper methods to control page layout. 

window.layoutHelpers.toggleCollapsed()
import { Component } from '@angular/core';
// Path to `src/app/layout/layout.service.ts` file
import { LayoutService } from './layout/layout.service';

@Component({
  selector: 'some-component',
  templateUrl: './some-component.component.html'
})
export class LayoutNavbarComponent {
  constructor(private layoutService: LayoutService) {}

  toggleSidenav() {
    this.layoutService.toggleCollapsed();
  }
}
export default {
  name: 'some-component',
  toggleSidenav() {
    this.layoutHelpers.toggleCollapsed()
  }
}

Methods

Method Description
getLayoutSidenav() Returns the .layout-sidenav element (if exists). Otherwise returns null.
getSidenav() Returns the .sidenav.layout-sidenav element or .sidenav element within .layout-sidenav (if exists). Otherwise returns null.
getLayoutNavbar() Returns the .layout-navbar element (if exists). Otherwise returns null.
getLayoutFooter() Returns the .layout-footer element (if exists). Otherwise returns null.
getLayoutContainer() Returns the .layout-container element (if exists). Otherwise returns null.
isSmallScreen() Returns true if the window width is less than 992px (lg breakpoint).
isLayout1() Returns true if the current layout is .layout-1.
isCollapsed() Returns true if the layout sidenav is collapsed.
isFixed() Returns true if the layout position is fixed.
isOffcanvas() Returns true if the current layout is offcanvas.
isNavbarFixed() Returns true if the layout navbar position is fixed.
isFooterFixed() Returns true if the layout footer position is fixed.
isReversed() Returns true if layout is reversed.
setCollapsed(collapsed, animate = true) Collapse / expand layout sidenav.
toggleCollapsed(animate = true) Toggle layout sidenav.
setPosition(fixed, offcanvas) Set layout position. Note: If the layout position is fixed and the current layout is .layout-1, the layout navbar position also will be fixed.
setNavbarFixed(fixed) Set layout navbar position.
setFooterFixed(fixed) Set layout footer position.
setReversed(reversed) Reverse layout.
update() Update layout.
setAutoUpdate(enable) Update layout on window resize.
on(event, callback)

Add an event listener. You can set listener namespace using the next syntax: {EventName}.{Namespace}.

// Subscribe to `resize` event. No namespace defined.
window.layoutHelpers.on('resize', function() {
  ...
});

// Subscribe to `resize` event with `page-1` namespace.
window.layoutHelpers.on('resize.page-1', function() {
  ...
});
// Subscribe to `resize` event. No namespace defined.
this.layoutService.on('resize', function() {
  ...
});

// Subscribe to `resize` event with `page-1` namespace.
this.layoutService.on('resize.page-1', function() {
  ...
});
// Subscribe to `resize` event. No namespace defined.
this.layoutHelpers.on('resize', function() {
  ...
})

// Subscribe to `resize` event with `page-1` namespace.
this.layoutHelpers.on('resize.page-1', function() {
  ...
})
off(event)

Remove an event listener. Will remove only events with given namespace, otherwise will remove all events without namespace.

// Remove all `resize` listeners without namespace.
window.ayoutHelpers.off('resize');

// Remove all `resize` listeners with `page-1` namespace.
window.layoutHelpers.off('resize.page-1');
// Remove all `resize` listeners without namespace.
this.layoutService.off('resize');

// Remove all `resize` listeners with `page-1` namespace.
this.layoutService.off('resize.page-1');
// Remove all `resize` listeners without namespace.
this.layoutHelpers.off('resize')

// Remove all `resize` listeners with `page-1` namespace.
this.layoutHelpers.off('resize.page-1')
init() Performs layoutHelpers initialization. Invoked automatically after the page loaded. You need to call this method only if the destroy() method called before. If layoutHelpers is already initialized, nothing will happen.
destroy()

Remove bound events, clean markup and disable layout auto update.

Will remove all bound events except init events. You will need unbind init events manually using the off() method.

Events

You can subscribe / unsubscribe events in two ways:

  1. Using the on() / off() methods (preferred way);
  2. Using window.addEventListener('layout{EventName}', ...) / window.removeEventListener('layout{EventName}', ...).
The destroy() method will remove only events bound using the on() method. So, after destroy, you will need to manually remove events bound using window.addEventListener. 
Examples:

// - Using the on() / off() methods, without namespace:

// Subscribe to `resize` event.
window.layoutHelpers.on('resize', function() {
  ...
});

// Unsubscribe `resize` event.
window.layoutHelpers.off('resize');


// - Using the on() / off() methods, with `page-1` namespace:

// Subscribe to `resize` event.
window.layoutHelpers.on('resize.page-1', function() {
  ...
});

// Unsubscribe `resize` event.
window.layoutHelpers.off('resize.page-1');


// - Using window.addEventListener / window.removeEventListener:

function resizeCallback() {
  ...
}

// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false);

// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false);
Examples:

// - Using the on() / off() methods, without namespace:

// Subscribe to `resize` event.
this.layoutService.on('resize', function() {
  ...
});

// Unsubscribe `resize` event.
this.layoutService.off('resize');


// - Using the on() / off() methods, with `page-1` namespace:

// Subscribe to `resize` event.
this.layoutService.on('resize.page-1', function() {
  ...
});

// Unsubscribe `resize` event.
this.layoutService.off('resize.page-1');


// - Using window.addEventListener / window.removeEventListener:

function resizeCallback() {
  ...
}

// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false);

// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false);
Examples:

// - Using the on() / off() methods, without namespace:

// Subscribe to `resize` event.
this.layoutHelpers.on('resize', function() {
  ...
})

// Unsubscribe `resize` event.
this.layoutHelpers.off('resize')

// - Using the on() / off() methods, with `page-1` namespace:

// Subscribe to `resize` event.
this.layoutHelpers.on('resize.page-1', function() {
  ...
})

// Unsubscribe `resize` event.
this.layoutHelpers.off('resize.page-1')

// - Using window.addEventListener / window.removeEventListener:

function resizeCallback() {
  ...
}

// Subscribe to `resize` event.
window.addEventListener('layoutresize', resizeCallback, false)

// Unsubscribe `resize` event.
window.removeEventListener('layoutresize', resizeCallback, false)
Event Description
init Triggered after layoutHelpers initialization completed.
toggle Triggered after layout sidenav collapsed / expanded.
resize Delayed window resize event. Default resize event delay: 200ms