.px-sidebar-content
element.
For the proper positioning, place the .px-sidebar-left
/.px-sidebar-right
after the .px-navbar
element.
PxSidebar plugin is initialized on pre-existing markup.
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. |
require(['jquery', 'px/plugins/px-sidebar'], function($) {
...
});
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>
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. |
You can subscribe on PxSidebar events using the syntax:
$('#sidebar').on('event.px.sidebar', function(e) {
// ...
// Preventable events can be prevented:
// e.preventDefault();
});
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. |
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.
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');
});
PxSidebar's options can be specified as attributes. All options expect an angular expression instead of a literal string.
<px-sidebar width="700"
enableScrollbar="false">...</px-sidebar>
Event handlers can be bound using attributes:
<px-sidebar on-collapse="ctrl.collapse"
on-collapsed="ctrl.collapsed">...</px-sidebar>
function SomeController() {
this.collapse = function(e) { ... }
this.collapsed = function(e) { ... }
});