Tab resize

Tab resize makes .nav elements responsive.

Tabs

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.

Simple tabs

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.

Pills

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.

Sizes

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.

Initializing

PxTabResize plugin is initialized on pre-existing markup.


$('.nav').pxTabResize(options);

Option Description
template

The tab element template.

Default: 

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"></a>
  <ul class="dropdown-menu"></ul>
</li>
content

.dropdown-toggle content.

Default: 

<span class="tab-resize-icon"></span>

Usage


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

Methods

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.

Usage

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.

Instance

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');
});

Options

px-tab-resize's options can be specified as attributes. All options expect an angular expression instead of a literal string.

  • button-content
  • button-template

<uib-tabset px-tab-resize
            button-content="'More'">...</uib-tabset>