.nav
elements responsive.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
I'm in Section 1.
Howdy, I'm in Section 2.
Howdy, I'm in Section 3.
Howdy, I'm in Section 4.
Howdy, I'm in Section 5.
Howdy, I'm in Section 6.
Howdy, I'm in Section 7.
Howdy, I'm in Section 8.
Howdy, I'm in Section 9.
PxTabResize plugin is initialized on pre-existing markup.
$('.nav').pxTabResize(options);
Option | Description |
---|---|
template |
The tab element template. Default:
|
content |
|
require(['jquery', 'px/plugins/px-tab-resize'], function($) {
...
});
You can call a public method of PxTabResize instance using the syntax:
$('.nav').pxTabResize('methodName');
Method name | Description |
---|---|
placeTabs | Force tabs resize. |
destroy | Destroy the PxTabResize instance. |
To use PxTabResize plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-tab-resize.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-tab-resize.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-tab-resize']);
Alternatively, you can include PxTabResize plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-tab-resize',
files: [
'path/to/js/pixeladmin/plugins/px-tab-resize.js',
'path/to/js/pixeladmin/directives/angular-px-tab-resize.js',
],
},
]);
px-tab-resize
directive
You can use px-tab-resize
directive where you want.
And when the scope is destroyed the directive will be destroyed.
I'm in Section 1.
I'm in Section 2.
I'm in Section 3.
I'm in Section 4.
I'm in Section 5.
I'm in Section 6.
I'm in Section 7.
I'm in Section 8.
I'm in Section 9.
You can define instance
attribute to get a pointer to PxTabResize element:
<uib-tabset px-tab-resize instance="ctrl.$tabResize">...</uib-tabset>
function SomeController() {
// Pointer
this.$tabResize = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$tabResize('placeTabs');
});
px-tab-resize's options can be specified as attributes. All options expect an angular expression instead of a literal string.
<uib-tabset px-tab-resize
button-content="'More'">...</uib-tabset>