Alex Alex - 5 months ago 171
AngularJS Question

How to properly swap between vertical pills and tabs based on screen resolution with angular-ui-bootstrap?

I have a default (horizontal) tabset made with angular-ui-bootstrap.

<uib-tabset active="0">
<uib-tab index="0" heading="Foobar">
<div ng-include="foobar.html"></div>
</uib-tab>
<!-- Other tabs... -->
</uib-tabset>


I'd like to transform it to a vertical "pills" tabset for mobile.

<uib-tabset active="0" vertical="true" type="pills">
<uib-tab index="0" heading="Foobar">
<div ng-include="foobar.html"></div>
</uib-tab>
<!-- Other tabs... -->
</uib-tabset>


Since I'm working with Bootstrap 3 I tried the following workaround:

<div class="visible-xs-block">
<uib-tabset active="0" vertical="true" type="pills">
<uib-tab index="0" heading="foobar">
<div ng-include="foobar.htm"></div>
</uib-tab>
<!-- Other tabs... -->
</uib-tabset>
</div>

<div class="hidden-xs">
<uib-tabset active="0">
<uib-tab index="0" heading="foobar">
<div ng-include="foobar.html"></div>
</uib-tab>
<!-- Other tabs... -->
</uib-tabset>
</div>


It "works" but I think it's not really efficient. I also have so issues with directives since some elements are defined twice (ng-include are duplicates).

Do you now how I could properly handle it in a controller or something?

Answer

Instead of duplicating your code, you can do something in the lines of this:

<uib-tabset active="0" vertical="myIsSmallScreenVariable" ng-attr-type="myIsSmallScreenVariable ? 'pills' : null">
  <uib-tab index="0" heading="foobar">
    <div ng-include="foobar.htm"></div>
  </uib-tab>
  <!-- Other tabs... -->
</uib-tabset>
Comments