Add orientation options for tabs

[pkozlowski-opensource]

Bootstrap 2.2.x introduced orientation options for tabs (see "Tabbable in any direction" under http://twitter.github.com/bootstrap/components.html#navs).

Left and right orientations should be trivial to implement. Bottom will require a switch in a template (or a separate template).

[ballmw]

Hello, I'm trying to work on this one and I thought I'd use two different templates. I tried the ng-switch but it wasn't working b/c of the way ng-switch makes a new scope (I think). But I'm having problems with the $compile not working and I think it has to do with the ng-transclude (html below). Anybody got any ideas? Maybe I'm going at this completely wrong?

.directive('tabs', ['$templateCache', '$compile', function($templateCache, $compile) {
        var getTemplate = function(type) {
            var template = $templateCache.get("template/tabs/tabs.html");
            if(type === 'below') {
                    template = $templateCache.get("template/tabs/tabs-below.html");
            }
            return template;
        };
  return {
    restrict: 'EA',
    transclude: true,
    scope: {
        orientation: '@'
    },
    controller: 'TabsController',
    link: function(scope, element, attrs) {
        var compile = $compile;
        attrs.$observe('orientation', function(value){
                var html = getTemplate(value);
                element.html(html);
                var compiled = compile(element.contents());
                //Things go horribly awry here...
                compiled.call(this, scope);
        });
    },
    replace: true
  };
}])

And this is the template...

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
            <a href="" ng-click="select(pane)">{{pane.heading}}</a>
        </li>
    </ul>
    <div class="tab-content" ng-transclude></div>
</div>

[pkozlowski-opensource]

@ballmw I've actually started to play with implementation, you can see my lousy experiments in this branch:
https://github.com/angular-ui/bootstrap/tree/tabs_orientation (aaa8d81).

For the left and right placements we don't need separate templates as you can see in the above commit. We would eventually need a separate template if we would like to support the bottom option, but not sure if this is worth the complexity at this stage...

So I was planning to more or less open a PR with what I've got (after adding tests) but the demo I've came up with is rubbish (I find it really ugly...). Fell free to take over or propose something different altogether (both in therms of implementation and demo)

[ballmw]

Yes, I was trying to get the bottom orientation to work. I'll check out your branch and look at the demos.

[jhiemer]

Hi Pawel,
sorry for the duplication, did not see this issue. :-(

@ballmw
I made quite less changes, then you did, because I though the developer should anyway have basic knowledge of twitter bootstrap.

My changes would be:

<tabs type="tabs-left">
</tabs>

link: function(scope, element, attrs) {      
      scope.type = attrs.type;
}

and in the template:

<div class="tabbable" ng-class="type">

What I would discuss before making a pull request, is how to make the tab itself more configurable. What if I want to add some icons to it? Currently that's not possible.

Have a nice sunday and best regards

Johannes

[pkozlowski-opensource]

@jhiemer we are trying to avoid hard-coding bootstrap CSS classes in JavaScript code so people can custmize templates and - why not - create another version of templates, for example to cover http://foundation.zurb.com/ (actually I think that we are not that far away from this with the current implementation).

So ideally a template should be the only place where we've got knowledge about bootstrap-specific markup and CSS. Once again, this is ideal, in practice it might be hard to achieve at times.

Would be great if you could have a look at my commit aaa8d81 and tell us what you think!

[pkozlowski-opensource]

It is already possible with the CSS only (8868f23), no need to add bytes for now. Closing.

[justinblake]

I added an ng-class to the template/tabs/tabset.html module and added one line to the tabset directive and in the tabset attribute of my html I added a left="true" in order to get the tabs appearing on the left. I don't know if this helps any but wanted to share the results.

[bsr203]

@justinblake thanks. I too used your changes.

Also see the change #659
Hope it lands soon.

Thanks again

[ajoslin]

You can already do this with <tabset class="tabs-left"></tabset> on the version in master.

[rvanbaalen]

This has been out there for quite some time now but still no solid solution to have tabs on the left and content on the right. The solution you state @ajoslin doesn't work (at the moment?). I'm using UI Bootstrap 0.11.2

[hugsbrugs]

Hi, I've created a gist for what we need : https://gist.github.com/hugsbrugs/c85a6b1c10d03e8cb0da

is there any chance for angular ui team to have a look at it to get the idea incorporated in next releases because I can't figure out the interest of vertical tabs without content on it's right ?