下面的 Angular UI Bootstrap 选项卡答案

【问题标题】：Angular UI Bootstrap tabs below下面的 Angular UI Bootstrap 选项卡
【发布时间】：2015-07-20 18:03:02
【问题描述】：

我一直在寻找一种在底部显示选项卡的方法，但还没有弄清楚。（显然，我使用的是 Tabs 指令）

我发现了这个：

但是在添加样式和“tabs-below”类之后：

<tabset class="tabs-below">
  <tab heading="" ui-sref="">
    <div ui-view=""></div>
</tab>

我只在选项卡上获得了不同的样式，但它们的位置没有改变。

任何帮助将不胜感激。

【问题讨论】：

标签： tabs angular-ui-bootstrap

【解决方案1】：

所以，我遇到了这种在 Angular Bootstrap UI 中覆盖模板的方法：

Can you override specific templates in AngularUI Bootstrap?

并更改了标记中的顺序（请注意，ul 在此模板中位于 .tab-content 之后）：

<script id="template/tabs/tabset.html" type="text/ng-template">
  <div> 
      <div class="tab-content"> 
        <div class="tab-pane"  
             ng-repeat="tab in tabs"  
             ng-class="{active: tab.active}" 
             tab-content-transclude="tab"> 
        </div>
      </div>

      <ul class="nav nav-{{type || 'tabs'}}" 
          ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" 
          ng-transclude></ul> 


    </div>
</script>

做到了。

【讨论】：

【解决方案2】：

以下模板应适用于最新的 2.3.1 版本：

<script id="uib/template/tabs/tabset.html" type="text/ng-template">
    <div>
        <div class="tab-content">
            <div class="tab-pane" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"></div>
        </div>
        <ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
    </div>
</script>

【讨论】：

最好在答案中附上解释，以帮助读者理解其工作原理。