Question

我正在尝试在带有角度材质的工具栏中添加标签。

我找到了一个很好的例子：

<md-toolbar layout="row" layout-align="center end">
    <div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
        <span flex></span>
        <md-tabs  md-stretch-tabs="always" class="md-primary">
            <md-tab id="tab1" aria-controls="Tab 1">
                <md-tab-label>Tab 1</md-tab-label>
            </md-tab>
            <md-tab id="tab2" aria-controls="Tab 2">
                <md-tab-label>Tab 2</md-tab-label>
            </md-tab>
        </md-tabs>
    </div>
</md-toolbar>

完美无缺，但我不确定如何添加内容。

如果我在<md-tab-body>标记内添加<md-tab>标记，则工具栏会展开，新内容会在工具栏中，我不想要。我希望标签内容位于工具栏下方。

我刚刚开始玩角形材料，所以我觉得我缺少一些基本的东西。

查看选项卡文档，似乎使用外部内容的选项卡可能很有用，但是文档并没有考虑人们如何做到这一点。

Answer 1

我认为这应该对您有帮助，我是新手。但是通过阅读文档代码here，我发现可以使用md-tab-body添加内容。所以我试过你可以看到这个codepen。我在md-tab-body下方添加了md-tab-label。希望这对你有所帮助。感谢您向我展示这么好的设计材料。

在此处添加我的代码：

<md-toolbar layout="row" layout-align="center end">
<div flex flex-sm="100" flex-gt-sm="95" flex-gt-md="80" layout="column">
    <span flex></span>
    <md-tabs  md-stretch-tabs="always" class="md-primary">
        <md-tab id="tab1" aria-controls="Tab 1">
            <md-tab-label>Tab 1</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab One</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
        <md-tab id="tab2" aria-controls="Tab 2">
            <md-tab-label>Tab 2</md-tab-label>
          <md-tab-body>
      <h1 class="md-display-2">Tab Two</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
    </md-tab-body>
        </md-tab>
    </md-tabs>
</div></md-toolbar>

<强> EDIT1 好吧。但我认为你的问题没有提到任何关于颜色的问题。这也可以用css来完成。现在我已更新了codepen，您可以看到here或here或其他颜色here。希望这对你有所帮助。如果这对你有帮助，请评价我的答案。

<强> EDIT2 好的。在网上搜索更多内容后，我发现可以使用名为md-selected的内容来跟踪选择的标签。然后基于on我使用的ng-switch-when索引的值，该值就是该索引。它与普通Switch-case语句类似。我也删除了那个css，因此它变得更加清晰。您可以看到解决方案here。我希望我的解决方案对您来说很清楚。我尽量保持简单。谢谢。

Answer 2

我知道这有点晚了但是你走了......

HTML：

<html>
  <head>
    <style>.intermediate { background:lightgray; }</style>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css">
  </head>
  <body ng-app="myApp">
    <div>
      <div ng-controller="TabCtrl" layout="column">      
        <md-toolbar layout="column" layout-align="end">
          <md-tabs md-dynamic-height md-border-bottom>
            <md-tab label="tab1" ng-click="tabClicked('tab1')"></md-tab>
            <md-tab label="tab2" ng-click="tabClicked('tab2')"></md-tab>
            <md-tab label="tab3" ng-click="tabClicked('tab3')"></md-tab>
          </md-tabs>
        </md-toolbar>
        <div layout="row" layout-padding class="intermediate">Intermediate element1</div>
        <div layout="row" layout-padding class="intermediate">Intermediate element2</div>
        <div layout="row" layout-padding class="intermediate">Intermediate element3</div>      
        <md-content flex layout-fill layout-padding ng-bind-html="tabContent">
          <!-- tab content gets injected here -->        
        </md-content>      
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
  </body>
</html>

JS：

var app = angular.module('myApp', ['ngMaterial']);

app.controller('TabCtrl', ['$scope', '$sce', function($scope, $sce) {

  // manually update associated tab content
  $scope.tabClicked = function(tab) {
  switch (tab) {
    case 'tab1':
      $scope.tabContent = $sce.trustAsHtml('<strong class="md-display-1">TAB1 CONTENT</strong>');
      break;
    case 'tab2':
      $scope.tabContent = $sce.trustAsHtml('<em class="md-display-2">TAB2 CONTENT</em>');
      break;
    case 'tab3':
      $scope.tabContent = $sce.trustAsHtml('<div class="md-display-4">TAB3 CONTENT</div>');
      break;
    }
  }

  // Initialize default content
  $scope.tabClicked('tab1');
}]);

Codepen

Answer 3

以下是如何为Angular Material

执行此操作

来自“Angular Material 2 Jeremy Elbourn and Kara Erickson”的LeashedIn演示应用程序演示：https://www.youtube.com/watch?v=0q9FOeEELPY

他们使用此代码：

<md-tab-group>
    <md-tab>
        <template md-tab-label>TAB 1 LABEL</template>
        <template md-tab-content>TAB 1 CONTENT</template>
    </md-tab>
    <md-tab>
        <template md-tab-label>TAB 2 LABEL</template>
        <template md-tab-content>TAB 2 CONTENT</template>
    </md-tab>
  </md-tab-group>

但它对我不起作用！

这对我有用：

<md-tab-group>
    <md-tab label="TAB 1 LABEL">
        TAB 1 CONTENT
    </md-tab>
    <md-tab label="TAB 2 LABEL">
        TAB 2 CONTENT
    </md-tab>
</md-tab-group>

来源： https://github.com/angular/material2/blob/master/src/lib/tabs/README.md

如何向Angular Material选项卡添加内容

3 个答案: