Как да добавите съдържание към разделите 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>

Редактиране1 добре. Но мисля, че във въпроса ви не се споменава нищо за цвета. Те могат да се направят и с css. Сега актуализирах codepen и можете да видите това тук или тук или това с друг цвят тук. Надявам се това да ви помогне. и ако това ви помага, моля, оценете отговора ми.

Редактиране2 Добре. След повече търсене в мрежата открих, че нещо, наречено 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 Неуловена грешка: [$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
Добре. без кода не мога да позная нищо. Имате чувството, че може да сте пропуснали нещо, вероятно проверете израза на скрипта си. Нещо близко до това. Но защо получавате грешката в angular.min.js:6. Моля, погледнете внимателно кода си още веднъж. и ако все още получавате грешката. Моля, вижте също и codepen, който предоставих, и сравнете с вашия код. Ако все още се сблъсквате с проблема, моля, поставете кода в 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

Ето как да го направите за Angular Material

В демо приложението LeashedIn от презентацията на „Angular Material 2 Jeremy Elbourn и Kara Erickson“: 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