ovh-angular-responsive-tabs with angular-ui

Wrapper for Angular UI Bootstrap directive "Tabs", that works with Angular UI Router.

Dynamically calculate the size of the tabs and push it into a dropdown.

Installation

Bower

bower install ovh-angular-responsive-tabs --save

NPM

npm install ovh-angular-responsive-tabs --save

Get the sources

    git clone https://github.com/ovh-ux/ovh-angular-responsive-tabs.git
    cd ovh-angular-responsive-tabs
    npm install
    bower install

You've developed a new cool feature ? Fixed an annoying bug ? We'd be happy to hear from you !

Have a look in CONTRIBUTING.md

Related links

• Contribute: https://github.com/ovh-ux/ovh-angular-responsive-tabs/blob/master/CONTRIBUTING.md
• Report bugs: https://github.com/ovh-ux/ovh-angular-responsive-tabs/issues
• Get latest version: https://github.com/ovh-ux/ovh-angular-responsive-tabs

License

See https://github.com/ovh-ux/ovh-angular-responsive-tabs/blob/master/LICENSE

Requirements

• jQuery
• ui.router
• ui.bootstrap

Usage

There are 3 directives:

ovh-angular-responsive-tabs

The container which contains the tabs.

Options:

• justified (optional) : Justify align the tabs (NOT TESTED)
• vertical (optional) : Verticaly align the tabs (NOT TESTED)
• immovable (optional) : If true, prevent the directive to always display the active tab.

responsive-tab

A regular tab.

Options:

• disabled (optional) : Tab is disabled? (true/false)
• select (optional) : Function called on select
• dropdown (optional) : Add this if the tab is an angular-ui dropdown
• state (optional) : ui.router state
• stateParams (optional) : ui.router params
• stateOptions (optional) : ui.router options
• dropdownTitle (optional) : (text) Text for this tab in the "more tab" dropdown
• dropdownTitleTemplate (optional) : (url) Text for this tab in the "more tab" dropdown

ovh-angular-responsive-tabs

MANDATORY The "more" tab dropdown (should be the last)

Example

<div class="row">
    <div class="col-xs-12">
        <responsive-tabs>
            <responsive-tab state="main.one">Home</responsive-tab>
            <responsive-tab state="main.two" dropdown-title="Chhh...">
                <i class="fa fa-user-secret"></i>
                <span>Hub</span>
            </responsive-tab>
            <responsive-tab-more> <i class="fa fa-plus"></i> </responsive-tab-more>  <!-- Should always be the last -->
        </responsive-tabs>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <ui-view></ui-view>
    </div>
</div>

.config(function ($stateProvider) {
    $stateProvider
      .state("main", {
        url : '/main',
        templateUrl: "app/main/main.html",
        controller: "mainCtrl",
        controllerAs : "mainCtrl"
      }).state('main.one', {
        url:         '/one',
        templateUrl: 'app/main/one.html'
      }).state('main.two', {
        url:         '/two',
        templateUrl: 'app/main/two.html'
      })