如何将内容添加到 Angular Material 个选项卡

Question

我正尝试在我的工具栏中添加标签 angular material。

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

<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> 标签内放置一个 <md-tab-body> 标签，那么工具栏会展开并且新内容位于工具栏内，这是我不想要的。我希望选项卡内容位于工具栏下方。

我刚开始玩 angular material 所以我觉得我缺少一些基本的东西。

查看选项卡文档，使用过的带有外部内容的选项卡似乎很有用，但是文档没有说明如何做到这一点。

Answer 1

我想这应该对你有帮助，我是新手但是通过阅读文档代码 here ,I found that the content can be added using md-tab-body. So I tried that you can see this codepen。我在 md-tab-label 下面添加了 md-tab-body。希望这对你有帮助。谢谢你给我展示这么好的设计 material.

在此处添加我的代码：

<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>

编辑 1 ok.But 我认为你的问题没有提到任何关于 color.Those 的事情也可以用 css 来完成。现在我已经更新了codepen，你可以看到here or here or this with other color here。希望这对你有帮助。如果这对您有帮助，请评价我的回答。

编辑2 Ok.After 在网络上搜索更多内容后，我发现可以使用名为 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 个选项卡

How to add content to Angular Material Tabs

angularjs

angular-material