• Ecosystem

Wrapkit Layout

Initialize

var options = {
  box: false,
  fullscreen: false
};
var wl = new WrapkitLayout( '#myLayout', options );

Fluid Layout 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set to fluid
  wl.setFluid();
});

Box Layout 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set to box
  wl.setBox();
});

Change to Fullscreen 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // fullscreen mode
  wl.fullscreen();
});

Exit Fullscreen 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // exit fullscreen
  wl.exitFullscreen();
});

_events

wl.on( "init", function( wl ) { });
wl.on( "layoutChanged", function( wl, layout ) { });
wl.on( "fullscreen", function( wl, fs ) { });

Wrapkit Header

Initialize

var options = {
  fixed: false,
  fixedPosition: "top",
  rtlMode: false,
  skin: "default"
};
var wh = new WrapkitHeader( '#myHeader', options );

Change header skin 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set skin
  wh.setSkin("blue");
});

Toggle fixed 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set fixed
  wh.fixed(true);
});

Fixed to top 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // fixed to top
  wh.fixedTop();
});

Fixed to bottom 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // fixed to bottom
  wh.fixedBottom();
});

Toggle direction (ltr/rtl) 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // toggle direction
  wh.rtl(true);
});

_events

wh.on( "init", function( wh ) { });
wh.on( "fixed", function( wh, pos ) { });
wh.on( "fixedBottom", function( wh ) { });
wh.on( "fixedTop", function( wh ) { });
wh.on( "rtl", function( wh ) { });
wh.on( "setSkin", function( wh, old, current ) { });

Wrapkit Content

Initialize

var options = { rtlMode: false };
var wc = new WrapkitContent( '#myContent', options );
// _events
wc.on('init', function( wc ) { });
wc.on('rtl', function( wc ) { });

Toggle direction (ltr/rtl) 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // toggle direction
  wc.rtl(true);
});

Wrapkit Sidebar

Initialize

var options = {
  align: "left",
  caret: {
    collapse: "fa-angle-right",
    expand: "fa-angle-down",
    prefix: "fa"
  },
  context: "teal",
  fixed: false,
  loader: "fa-spinner",
  maxResize: 360,
  minResize: 220,
  mode: "vertical",
  resizable: true,
  rtlMode: false,
  size: "lg",
  skin: "dark",
  variant: "tabs",
  visible: true
};
var sidebar = new WrapkitSidebar( '#mySidebar', options );

Vertical mode 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // sidebar vertical
  sidebar.setMode("vertical");
});

Horizontal mode 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // sidebar horizontal
  sidebar.setMode("horizontal");
});

Change sidebar skin 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set skins
  sidebar.setSkin('dark');
});

Sidebar Contexts 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set contexts
  sidebar.setContext('red');
});

Sidebar Variants 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set variants
  sidebar.setVariant('pills');
});

Toggle Fixed 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // toggle fixed
  sidebar.fixed(true);
});

Resize to small 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // resize to small
  sidebar.size('sm');
});

Resize to large 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // resize to large
  sidebar.size('lg');
});

Hide sidebar 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // hide sidebar
  sidebar.hide();
});

Show sidebar 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // show sidebar
  sidebar.show();
});

Show Loader Indicator 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // show event loader
  var index = sidebar.elem.querySelector('.nav-item:eq(3)');
  sidebar.showLoader( index, 'fa-spinner' );
});

Hide Loader Indicator 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // show event loader
  var index = sidebar.elem.querySelector('.nav-item:eq(3)');
  sidebar.hideLoader( index  );
});

Toggle sidebar align 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set align
  sidebar.align('right');
});

Sidebar Direction (rtl/ltr) 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // toggle direction
  sidebar.rtl(true);
});

Sidebar live resizable 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // turn on/off mouse resizable
  sidebar.resizable(true);
});

_events

sidebar.on( "init", function( sidebar ) { });
sidebar.on( "align", function( sidebar, align ) { });
sidebar.on( "fixed", function( sidebar, fixed ) { });
sidebar.on( "hide", function( sidebar, visibility ) { });
sidebar.on( "hideLoader", function( sidebar, loader, target ) { });
sidebar.on( "rtl", function( sidebar, rtl ) { });
sidebar.on( "resizable", function( sidebar, resizable ) { });
sidebar.on( "setContext", function( sidebar, old, current ) { });
sidebar.on( "setSkin", function( sidebar, old, current ) { });
sidebar.on( "setVariant", function( sidebar, old, current ) { });
sidebar.on( "show", function( sidebar, visibility ) { });
sidebar.on( "showLoader", function( sidebar, loader, target ) { });
sidebar.on( "size", function( sidebar, size ) { });

Wrapkit Footer

Initialize

var options = {
  rtlMode: false,
  skin: "default"
};
var wf = new WrapkitFooter( '#myFooter', options );

Change Footer Skin 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // set skins
  wf.setSkin('light');
});

Toggle direction (ltr/rtl) 

document.querySelector("#myButton")
.addEventListener( "click", function(){
  // toggle direction
  wf.rtl(true);
});

_events

wf.on( "init", function( wf ) { });
wf.on( "rtl", function( wf ) { });
wf.on( "setSkin", function( wf, old, current ) { });