如何将内容添加到角材料标签

我发现了一个很好的例子：

<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>标记，那么工具栏会展开，并且新内容位于工具栏中，这是我不想要的。我希望标签内容位于工具栏下方。

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

看看选项卡文档，它似乎像使用与外部内容的标签可能会有用，但文档并没有进入如何可以做到这一点。

来源

2015-07-22 lostintranslation

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

添加我的代码在这里：

<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 ok.But我认为你的问题没有提及任何关于color.Those可以用CSS来实现了。现在我已经更新了codepen，你可以看到here或here或与其他颜色here。希望这可以帮助你。如果这可以帮助你，请评价我的答案。

EDIT2 Ok.After搜索更多关于Web我发现，所谓的md-selected东西可以用来跟踪哪些选择选项卡。然后根据on那个索引值我用ng-switch-when这个值就是那个索引。这与正常的Switch-case声明相似。我也删除了这个CSS，使它变得更清晰。您可以看到解决方案here。我希望我的解决方案对您很清楚。我尽量保持简单。谢谢。

来源

2015-07-22 05:06:02 govindpatel

这就是我试图避免。看看你的例子中的内容如何在蓝色工具栏中。我想要蓝色工具栏中的选项卡，但是导航栏下方白色部分的内容。 – lostintranslation

该标签正文的内容仍位于工具栏中。我希望标签内容能够在工具栏外生存。在你的例子中，你可以看到棕色工具栏的颜色是如何包装一切的。 – lostintranslation

@lostintranslation感谢您的澄清。我编辑了我的答案请参阅** Edit2 **。希望这次能帮助你。让我知道如果我仍然错，我会再试一次。谢谢。 – govindpatel

我知道这有点晚了，但你在这里...

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

来源

2016-05-13 20:46:50 nub340

这里是如何从“角材料2做对角材料

在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

来源

2016-11-26 22:05:00

OP所要求的'angularjs material'版本，而不是'angular material2'。 – Edric

另请注意，还有更多文档[这里]（https://github.com/angular/material2/blob/master/src/lib/tabs/tabs.md） – Edric

如何将内容添加到角材料标签

回答

相关问题