PxSidebar

Basic

By default, PxSidebar initializes the Perfect-scrollbar plugin on the .px-sidebar-content element.

Without scrollbar

Custom width

With tabs

Using with PxNavbar

For the proper positioning, place the .px-sidebar-left/.px-sidebar-right after the .px-navbar element.

Initializing

PxSidebar plugin is initialized on pre-existing markup.

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, for example: <div class="px-sidebar-left" data-width="200">...</div>. 

$('#sidebar').pxSidebar(options);

Option Default Description
width null Sidebar width.
enableScrollbar true Initialize the Perfect-scrollbar plugin on the .px-sidebar-content element.
desktopMode [ 'lg', 'xl' ] Desktop mode breakpoints. Must be equal to PxNav's config.modes.desktop.
Learn more at PxNav doc page.

Usage


require(['jquery', 'px/plugins/px-sidebar'], function($) {
  ...
});

Lazy initialization

In common cases, you don't need to initialize PxSidebar instance manually – just use data-toggle="sidebar" and data-target="#targeted-sidebar" attributes on the toggle button. PxSidebar instance will be initialized on the button click event. 


<button type="button" data-toggle="sidebar" data-target="#targeted-sidebar">Toggler</button>

...

<div class="px-sidebar-left" id="targeted-sidebar">
  ...
</div>

Methods

You can call a public method of PxSidebar instance using the syntax: 


$('#sidebar').pxSidebar('methodName');

Method name Description
toggle Toggle the sidebar.
update Update sidebar position and scrollbar.
You need to call this method after each content change.
destroy Destroy the PxSidebar instance.

Events

You can subscribe on PxSidebar events using the syntax: 


$('#sidebar').on('event.px.sidebar', function(e) {
// ...

// Preventable events can be prevented:
// e.preventDefault();
});

Events marked with * are preventable.
Event Description
expand*

This event is fired before the sidebar will be expanded.
expanded

This event is fired when the sidebar has expanded.
collapse*

This event is fired before the sidebar will be collapsed.
collapsed

This event is fired when the sidebar has collapsed.

Usage

To use PxSidebar plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/plugins/px-sidebar.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-sidebar.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['px-sidebar']);

Alternatively, you can include PxSidebar plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'px-sidebar',
    files: [
      'path/to/js/pixeladmin/plugins/px-sidebar.js',
      'path/to/js/pixeladmin/directives/angular-px-sidebar.js',
    ],
  },
]);

px-sidebar directive

Specify template-url attribute on the element to load sidebar content from a template.

NOTE: The template-url attribute expects an angular expression instead of a literal string. 


<px-sidebar>...content...</px-sidebar>
<px-sidebar template-url="'path/to/sidebar/template.html'"></px-sidebar>

You can use px-sidebar directive where you want. And when the scope is destroyed the directive will be destroyed.

Default

Instance

You can define instance attribute to get a pointer to PxSidebar element: 


<px-sidebar instance="ctrl.$sidebar">...</px-sidebar>
        

function SomeController() {
  // Pointer
  this.$sidebar = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$sidebar('toggle');
  this.$sidebar('update');
});

Options

PxSidebar's options can be specified as attributes. All options expect an angular expression instead of a literal string.

  • desktop-mode
  • enable-scrollbar
  • width

<px-sidebar width="700"
            enableScrollbar="false">...</px-sidebar>

Events

Event handlers can be bound using attributes:

  • on-collapse
  • on-collapsed
  • on-expand
  • on-expanded

<px-sidebar on-collapse="ctrl.collapse"
            on-collapsed="ctrl.collapsed">...</px-sidebar>
        

function SomeController() {
  this.collapse = function(e) { ... }
  this.collapsed = function(e) { ... }
});