如何將內容添加到角材料標籤

我發現了一個很好的例子：

<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

如何將內容添加到角材料標籤

回答

相關問題