Question

我想要做的是使用bootstrap ui tabs组件并使其工作，以便在添加选项卡时，父div容器将扩展隐藏溢出的位置，并且选项卡不< / em>垂直堆叠。当宽度超过容器宽度时，组件选项卡的ngRepeat渲染似乎强制垂直堆叠选项卡。除了该功能之外，我还想在选项卡组件的左侧和右侧设置按钮，以便滚动到溢出（隐藏）选项卡。

我在这里有一个plunkr项目：

http://plnkr.co/edit/NybUxdTg8Ro7kIuUN5eZ?p=preview

有没有人知道如何停止标签的垂直堆叠，让它们水平扩展并溢出（隐藏）并允许使用按钮导航到隐藏的标签？

我几乎要到了需要使用其他组件的地步。

Answer 1

You can't really scroll items that are floated。在这种情况下，您可以覆盖Bootstraps样式，以便选项卡为inline-block而不是浮动，然后您可以像这样滚动.nav-tabs：

.nav-tabs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 46px;
}

我必须添加一些其他样式才能让你的Plunkr工作，主要是因为按钮。您的按钮是<ul>的子项，无效。我没有解决这个问题，但我已将它们设置为绝对定位，并建议您将它们从<ul>中删除。

Here's an updated Plunnkr - 我的样式表是styles.css。

Answer 2

我意识到这是一个古老的问题，但是我做了一个Angular指令，它做了我认为你正在寻找的东西： https://github.com/mikejacobson/angular-bootstrap-scrolling-tabs

如果您正在使用ng-repeat生成标签，请执行以下操作：

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li ng-class="{ 'active': tab.isActive }" ng-repeat="tab in main.tabs">
    <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.label}}</a>
  </li>
</ul>

您可以使用元素指令ul.nav-tabs替换scrolling-tabs元素：

<!-- Scrolling Nav tabs -->
<scrolling-tabs tabs="{{main.tabs}}"></scrolling-tabs>

如果超过其容器的宽度，将使标签保持连续，左右滚动箭头将显示 - 没有水平滚动条 - 允许您滚动标签。

或者，如果您想保留ul.nav-tabs标记并且只想使标签可滚动，则可以将ul包含在带有属性指令div的{{1}}中：

scrolling-tabs-wrapper

这里有一个显示这两个选项的plunk。

您还可以使用<div scrolling-tabs-wrapper>  <ul class="nav nav-tabs" role="tablist"> <li ng-class="{ 'active': tab.active, 'disabled': tab.disabled }" ng-repeat="tab in main.tabs"> <a ng-href="{{'#' + tab.paneId}}" role="tab" data-toggle="tab">{{tab.title}}</a> </li> </ul> </div>来包装Angular UI Bootstrap选项卡scrolling-tabs-wrapper元素：

tabset

这里显示了plunk选项。

Answer 3

您有overflow:hidden但未指定标签容器的固定高度。

试试这个：

<!DOCTYPE html>
<html ng-app="tabsApp">

  <head>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
    <script src="example.js"></script>
    <script src="directive.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div ng-controller="tabsAppCtrl">
      <button class="btn btn-default" style="margin: 10px" ng-click="addTab()">Add Tab</button>
      <input ng-model="tabName" />
      <button class="btn btn-default" ng-click="clearTabs()" style="margin-left: 8px">Clear Tabs</button>
      <my-tabs>
        <tabset style="overflow: hidden; height: 50px">
          <button class="btn-sm btn-default glyphicon glyphicon-chevron-left" style="float: left; margin-top: 22px"></button>
          <tab ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">
            <tab-heading style="cursor: pointer">
              <div>
                <span class="glyphicon glyphicon-list-alt"></span>
                <span>{{tab.title}}</span>
                <button class="btn btn-default btn-sm glyphicon glyphicon-remove" ng-click="removeTab(tab)"></button>
              </div>
            </tab-heading>
            {{tab.content}}
          </tab>
          <button class="btn-sm btn-default glyphicon glyphicon-chevron-right" style="float: right; margin-top: 75px;  right: 0px; position: absolute"></button>
        </tabset>
      </my-tabs>  
    </div>
  </body>

</html>

这是您更新的plunkr：http://plnkr.co/edit/Rfa8AYOcLffrn6HqSdgu?p=preview

Answer 4

以下是我的解决方案：http://plnkr.co/edit/T2snJI0zqnNTGKte55Ba?p=preview

它仅使用angular-ui标签进行测试。它还支持两侧的一些漂亮工具提示，告诉您当前视口的左侧和右侧有哪些选项卡。

它的主旨是：

<scrollable-tabset show-tooltips="true">
  <tabset>
    <tab ng-repeat="x in y">...</tab>
  </tabset>
</scrollable-tabset>

您可以找到回购here。

如何添加选项卡以使它们溢出容器的宽度，如何防止Bootstrap UI选项卡组件垂直堆叠？

4 个答案: