CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-strap
Faizan Shakeel
Faizan Shakeel

Reputation: 171

Angular Strap Tabs Justified

I need to create 4 tabs in my app and after comparing Angular UI and Angular Strap, i decided to go with Angular Strap. I have lost hope in Angular Strap and this is my last try before i throw it out of my app. I don't really get how a simple thing like making Tabs Justified is so difficult or am i missing something very basic?

Where and how should i include a class to make Tabs justified? Thanks

Markup:

<div class="col-lg-8 col-md-8 col-sm-8 col-lg-offset-2" ng-controller="TabsAndTablesCtrl">
    <div ng-model="tabs.activeTab" tabs.navClass bs-tabs>
        <div ng-repeat="tab in tabs" title="{{ tab.title }}" ng-bind="tab.content" bs-pane></div>
    </div>
</div>

Controller:

var app = angular.module('tabsAndTablesModule', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('TabsAndTablesCtrl', function($scope) {

        $scope.tabs = [
            {title:'Projects', content: 'Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.'},
            {title:'Tasks', content: 'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.'},
            {title:'Documents', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.'},
            {title:'Users', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.'}
        ];

        $scope.tabs.activeTab = 1;
});

Upvotes: 1

Views: 1093

Answers (1)

Rahil Wazir
Rahil Wazir

Reputation: 10142

This is how you can add a class

<div ng-model="tabs.activeTab" nav-class='nav-justified nav-pills'..

See Demo

And its also documented

Upvotes: 1

Related Questions