How can I separate tab headers from my bodies using angles?

Question

In an angularjs project, I use the uib-tabset directive to display tabs. I would like to display the left panel, which is common to all tabs. So I have to add a div before or after the uib-tabset directive.

By default, the title is directly above the body of the tab.

In the generated structure, I would like to enable the panel inside the tabs (visually):

With uib-tabsets, the generated structure looks like this:

<panel> <tabs-headings> <tabs-bodies> 

With this structure, the only way I found is to edit the css and play with the position properties (left / top) to move the headers over the sidebar, but I find this risky. Another way is to duplicate the panel code inside each tab, but I also find this bad.

Instead, I would like to generate this, so it would be easier to create css:

 <tabs-heading> <panel> <tabs-bodies> 

Is there an easy way to achieve this behavior?

thanks

Answer 1

Edit: Lol. I just saw that I was 10 months late.

I just ran into what you are talking about. If you dynamically present content on each tab using ng-repeat , this avoids the need to redo the sidebar several times.

  <div class="tabWrapper"> <uib-tabset> <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> <div class="sidePanel">{{tab.sidepanel}}</div> <div class="tabContent">{{tab.content}}</div> </uib-tab> </uib-tabset> </div> 

You would not need a mess with absolute positioning:

 .sidePanel { float: left; width: 20%; height: 10em; border: 1px solid black; border-top: none; } 

OR, if you are using angular-ui-router , you can execute a static sidebar using abstract states.

config.js

  $stateProvider .state('root.tabs', { abstract: true, controller: 'TabsCtrl as vm', templateUrl: 'templates/app-layout/tabs.tpl.html' }) .state('root.tabs.view', { url: '/tabsview', templateUrl: 'templates/app-layout/sidepanel.tpl.html' }); 

tabs.tpl.html

  <div> <uib-tabset> <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> <div class="sidePanelContainer" ui-view></div> <div class="tabContent">{{tab.content}}</div> </uib-tab> </uib-tabset> </div> 

sidepanel.tpl.html

 <div class="sidePanel"> <input type="text" value="1234"> <input type="text" value="4321"> </div> 

See also: What is the purpose of using an abstract state?

Hope this helps