{ WRAPKIT }
  1. Home
  2. Ecosystem

Ecosystem

Sekedar menunjukkan apa yang bisa dilakukan setiap bagian dari ekosistem. Untuk mempelajari Wrapkit Ekosistem lebih lanjut anda bisa membacanya pada Dokumentasi (pada file download).

Wrapkit Layout

Descriptions Play it

show code Fluid Layout 

$( "#myButton" ).on( "click", function(){
  // selector .wrapkit-wrapper
  $( "#myLayout" ).wrapkitLayout( "setFluid" );
});

show code Box Layout 

$( "#myButton" ).on( "click", function(){
  // selector .wrapkit-wrapper
  $( "#myLayout" ).wrapkitLayout( "setBox" );
});

show code Toggle Layout ("fluid" / "box") 

$( "#myButton" ).on( "click", function(){
  // selector .wrapkit-wrapper
  $( "#myLayout" ).wrapkitLayout( "toggleLayout" );
});

show code Change to Fullscreen 

$( "#myButton" ).on( "click", function(){
  // selector .wrapkit-wrapper
  $( "#myLayout" ).wrapkitLayout( "fullscreen", true );
});

show code Exit Fullscreen 

$( "#myButton" ).on( "click", function(){
  // selector .wrapkit-wrapper
  $( "#myLayout" ).wrapkitLayout( "fullscreen", false );
});

Wrapkit Header

Descriptions Play it

show code Change header skin 

$( "#myButton" ).on( "click", function(){
  // selector .header
  $( "#myHeader" ).wrapkitHeader( "setSkin", "greentur" );
});

show code Toggle fixed position 

$( "#myButton" ).on( "click", function(){
  // selector .header
  var $wrapkitHeader = $( "#myHeader" ),
  fixed = ( ! $wrapkitHeader.wrapkitHeader( "option", "fixed" ) );

  $wrapkitHeader.wrapkitHeader( "fixed", fixed );
});

show code Set fixed position to Top 

$( "#myButton" ).on( "click", function(){
  // selector .header
  $( "#myHeader" ).wrapkitHeader( "fixedTop" );
});

show code Set fixed position to Bottom 

$( "#myButton" ).on( "click", function(){
  // selector .header
  $( "#myHeader" ).wrapkitHeader( "fixedBottom" );
});

show code Toggle direction (ltr/rtl) 

$( "#myButton" ).on( "click", function(){
  // selector .header
  var $wrapkitHeader = $( "#myHeader" ),
  rtl = ( ! $wrapkitHeader.wrapkitHeader( "option", "rtlMode" ) );

  $wrapkitHeader.wrapkitHeader( "rtlMode", rtl );
});

Wrapkit Content

Descriptions Play it

show code Toggle direction (ltr/rtl) 

$( "#myButton" ).on( "click", function(){
  // selector .content-wrapper
  var $wrapkitContent = $( "#myContent" ),
  rtl = ( ! $wrapkitContent.wrapkitContent( "option", "rtlMode" ) );

  $wrapkitContent.wrapkitContent( "rtlMode", rtl );
});

Wrapkit Sidebar

Description Play it

show code Change sidebar skin 

$( "#myButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "setSkin", "greentur" );
});

show code Change style Variants 

$( "#myButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "setVariant", "caretal" );
});

show code Change Contexts color 

$( "#myButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "setContext", "green" );
});

show code Toggle fixed position 

$( "#myButton" ).on( "click", function(){
  var sidebar = $( "#mySidebar" ),
  fixed = ( ! $sidebar.data().wrapkitSidebar.options.fixed );

  $sidebar.wrapkitSidebar( "fixed", fixed );
});
// event
$( "#mySidebar" ).on( "wrapkit.sidebar.fixed", function( e, fixed ){
  if ( fixed ) {
    console.log( "Sidebar is fixed!" );
  } else{
    console.log( "Sidebar is not fixed!" );
  }
});

show code Resize to small size 

$( "#muButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "resize", "sm" );
});
// event
$( "#mySidebar" ).on( "wrapkit.sidebar.resize", function( e, size ){
  console.log( "Sidebar size is " + size );
});

show code Toggle the Sidebar size 

$( "#myButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "toggleSize" );
});

show code Collapse all open items 

$( "#myButton" ).on( "click", function(){
  $( "#mySidebar" ).wrapkitSidebar( "collapseAll" );
});

show code Show the Sidebar loader indicator 

var toggleSidebarLoader = function( sidebar, duration ){
  sidebar.wrapkitSidebar( "loader", true );
  
  // just demo to hide (on timeout)
  setTimeout( function(){
    sidebar.wrapkitSidebar( "loader", false );
  }, duration );
};
$( "#myButton" ).on( "click", function(){
  toggleSidebarLoader( $( "#mySidebar" ), 2000 );
});

show code Set the Sidebar loader indicator and show 

var toggleSidebarLoader = function( sidebar, duration ){
  sidebar.wrapkitSidebar( "loader", true );

  // just demo to hide (on timeout)
  setTimeout( function(){
    sidebar.wrapkitSidebar( "loader", false );
  }, duration );
};
$( "#myButton" ).on( "click", function(){
  // set loader
  $("#mySidebar").wrapkitSidebar( "setLoader", "fa fa-spin fa-refresh" );
  // toggle loader
  toggleSidebarLoader( $( "#mySidebar" ), 2000 );
});

show code Toggle the Sidebar align (left/right) 

$( "#myButton" ).on( "click", function(){
  $("#myLoader").wrapkitSidebar( "toggleAlign" );
});

show code Toggle the Sidebar rtl (right to left) mode 

$( "#myButton" ).on( "click", function(){
  var $sidebar = $("#myLoader"),
  rtl = ( ! $sidebar.wrapkitSidebar( "option", "rtlMode" ) );

  $sidebar.wrapkitSidebar( "rtlMode", rtl );
});

show code Toggle the Sidebar Collapse to navbar (resize your browser to 768px to see this effect). 

$( "#myButton" ).on( "click", function(){
  var $sidebar = $("#mySidebar"),
  collapseToNavbar = ( ! $sidebar.data().wrapkitSidebar.options.collapseToNavbar );

  $sidebar.wrapkitSidebar("collapseToNavbar", collapseToNavbar);
});

show code

Disable live resizable (just on sidebar lg).

$( "#myButton" ).on( "click", function(){
  $("#mySidebar").wrapkitSidebar( "liveResizable", false );
});

show code

Enable live resizable (just on sidebar lg).

$( "#myButton" ).on( "click", function(){
  $("#mySidebar").wrapkitSidebar( "liveResizable", true );
});

Wrapkit Footer

Descriptions Play it

show code Change Footer skin 

$( "#myButton" ).on( "click", function(){
  // selector .footer-wrapper
  $( "#myFooter" ).wrapkitFooter( "setSkin", "greentur" );
});

show code Toggle direction (ltr/rtl) 

$( "#myButton" ).on( "click", function(){
  // selector .footer-wrapper
  var $wrapkitFooter = $( "#myFooter" ),
  rtl = ( ! $wrapkitFooter.wrapkitFooter( "option", "rtlMode" ) );
  
  $wrapkitFooter.wrapkitFooter( "rtlMode", rtl );
});