Как добавить контент на вкладки 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-body> внутри тега <md-tab>, панель инструментов расширяется, и это новое содержимое оказывается внутри панели инструментов, что мне не нужно. Я хочу, чтобы содержимое вкладки находилось под панелью инструментов.

Я только начал экспериментировать с угловатым материалом, поэтому чувствую, что упускаю что-то фундаментальное.

Глядя на документы вкладок, кажется, что использованные вкладки с внешним контентом могут быть полезны, однако в документах не рассказывается, как это можно сделать.


angularjs angular-material
person lostintranslation    schedule 22.07.2015    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Думаю, это должно вам помочь, я новичок в этом. Но, прочитав код документа здесь, я обнаружил, что контент можно добавлять с помощью 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. Я обновил код, и вы можете видеть, что здесь или здесь или это другим цветом здесь. Надеюсь, это тебе поможет. и если это поможет вам, пожалуйста, оцените мой ответ.

Edit2 Хорошо. После поиска в Интернете я обнаружил, что что-то под названием md-selected можно использовать для отслеживания того, какая вкладка выбрана. а затем на основе on значения этого индекса я использовал ng-switch-when значение этого индекса. Это похоже на обычные инструкции Switch-case. Я также удалил этот CSS, чтобы он стал более понятным. Вы можете увидеть решение здесь. Надеюсь, мое решение вам понятно. Я старался сделать это как можно проще. Спасибо.

person govindpatel    schedule 22.07.2015
comment
Это то, чего я пытался избежать. Посмотрите, как в вашем примере содержимое находится на синей панели инструментов. Мне нужны вкладки на синей панели инструментов, но содержимое в белой части под панелью навигации. - person lostintranslation; 22.07.2015
comment
Содержимое с основной частью этих тегов все еще находится на панели инструментов. Я хочу, чтобы содержимое вкладки находилось за пределами панели инструментов. В вашем примере вы можете увидеть, как коричневый цвет панели инструментов по-прежнему оборачивает все. - person lostintranslation; 22.07.2015
comment
@lostintranslation Спасибо, что разъяснили. Я отредактировал свой ответ. См. Edit2. Надеюсь, на этот раз это поможет тебе. Сообщите мне, если я все еще ошибаюсь, я попробую еще раз. Спасибо. - person govindpatel; 23.07.2015
comment
Привет, @govindpatel, я использовал ваш код и столкнулся с проблемой: angular.min.js: 6 Uncaught Error: [$ injector: modulerr] errors.angularjs.org/1.5.8/$injector/… FC% 3A% 2FUsers% 2FKH1983% 2FDesktop% 2FWebEaxmples% 2Fangular.min.js% 3A20 % 3A390) дайте мне знать, что мне не хватает - person Yugandhar; 01.08.2016
comment
Ok. без кода я ничего не могу угадать. Похоже, вы что-то пропустили, возможно, проверьте свой сценарий. Что-то близкое к этому. Но почему вы получаете ошибку в angular.min.js:6. Пожалуйста, внимательно посмотрите на свой код еще раз. и если вы все еще получаете сообщение об ошибке. Также просмотрите код, который я предоставил, и сравните с вашим кодом. Если проблема не исчезла, вставьте код в jsfiddle или codepen, как это сделал я. Спасибо, - person govindpatel; 01.08.2016

arrow_upward
2
arrow_downward

Я знаю, что это немного поздно, но вот ...

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

person nub340    schedule 13.05.2016

arrow_upward
1
arrow_downward

Вот как это сделать для углового материала

В демонстрационном приложении LeashedIn из презентации Angular Material 2 Джереми Элборн и Кара Эриксон: 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

person Artem Yagga    schedule 26.11.2016
comment
OP запросил версию angularjs material, а не angular material2. - person Edric; 23.03.2017
comment
Также обратите внимание, что здесь есть другие документы. - person Edric; 23.03.2017