Важная правая сторона nav используя угловой материал

Я пытаюсь получить фиксированную правую боковую панель, используя угловой материал, а также фиксированную панель инструментов сверху. Кажется, у меня что-то не хватает, из-за чего он, похоже, вообще не работает. Я попытался вынуть из него перо, пожалуйста, дайте мне знать, как это исправить. Ниже мой мкр-контент кодВажная правая сторона nav используя угловой материал

<md-content flex class='md-padding' layout="column"> 
    <md-card ng-repeat = "card in cards"> 
     {{card.title}} 
     {{card.text}} 
    </md-card> 
    <md-sidenav flex md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2"> 
     <md-content layout="column"> 
      <div flex> 
       <md-button href="http://google.com"> Button </md-button> 
      </div> 
      <div flex> 
       <md-button href="http://google.com"> Button </md-button> 
      </div> 
     </md-content> 
    </md-sidenav> 
</md-content>

http://codepen.io/viggy_prabhu/pen/xVvQzr

источник

2016-05-24 viggy

Попробуйте что-то вроде этого. Я установил sidenav и содержимое в строке макета. Удален атрибут flex из md-sidenav и вместо этого распределен в макет 1/3 и 2/3 [flex = "33" и flex = "66"].

<md-content layout="row"> 
    <md-sidenav md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2" flex="33"> 
    <md-content layout="column"> 
     <div flex> 
     <md-button href="http://google.com"> Button </md-button> 
     </div> 
     <div flex> 
     <md-button href="http://google.com"> Button </md-button> 
     </div> 
     <div flex> 
     <md-button href="http://google.com"> Button </md-button> 
     </div> 
     <div flex> 
     <md-button href="http://google.com"> Button </md-button> 
     </div> 
    </md-content> 
    </md-sidenav> 
    <md-content flex="66"> 
    <md-card ng-repeat="card in cards"> 
    {{card.title}} {{card.text}} 
    </md-card> 
    </md-content> 
</md-content>

источник

2016-05-24 14:47:17 nitimalh

Это почти хорошо, за исключением того, что создает свиток bar в области содержимого, а не в полосе прокрутки для всей страницы. Я могу это исправить. Я изменил кодировщик с внесенными вами изменениями. http://codepen.io/viggy_prabhu/pen/xVvQzr – viggy

<body ng-app="materialApp"> 
    <div ng-controller="AppCtrl" layout='column' layout-fill> 
    <md-toolbar class='md-medium-tall'> 
     <div class="md-toolbar-tools"> 
     <span>Fixed to Top</span> 
     <span flex></span> 
     </div> 
    </md-toolbar> 
    <md-content class='md-padding' layout="row"> 
     <div layout="column" flex> 
     <md-card ng-repeat="card in cards"> 
      {{card.title}} {{card.text}} 
     </md-card> 
     </div> 
     <md-sidenav flex=20 md-component-id="right" md-is-locked-open="true" class="md-sidenav-right md-whiteframe-z2" layout-fill> 
     <md-content style="padding-top:5%; height: 200px" layout="column"> 
      <div flex> 
      <md-button href="http://google.com"> Button </md-button> 
      </div> 
      <div flex> 
      <md-button href="http://google.com"> Button </md-button> 
      </div> 
      <div flex> 
      <md-button href="http://google.com"> Button </md-button> 
      </div> 
      <div flex> 
      <md-button href="http://google.com"> Button </md-button> 
      </div> 
     </md-content> 
     </md-sidenav> 
    </md-content> 
    </div> 
</body>

Добавлен ДИВ вокруг повторе мкр-карты и поставил мкр-sidenav рядом с ним. Также удалена макет из тега тела. Это позволяет стороне-nav сгибаться в нижней части страницы.

источник

2016-05-24 20:28:19 nitimalh

Спасибо за ответ. Однако это удалило полосу прокрутки, но удалило фиксированную панель инструментов, и даже панель sidenav не была исправлена. Я попробовал это на кодепе, обновив его. http://codepen.io/viggy_prabhu/pen/xVvQzr – viggy

О, извините, измените тег body на следующий, чтобы navbar оставался фиксированным, так как он является родителем, который решает это свойство ' ' Чтобы сделать sidenav липкой, вам нужно будет добавить некоторые элементы css. Не думайте, что угловой материал обеспечивает это из коробки. – nitimalh

вы можете попробовать использовать услугу $ mdSticky от углового материала

(function() { 
    angular.module('example', ['ngMaterial']); 
})(); 

(function() { 
    angular.module('example').directive('sticky', Sticky); 

    Sticky.$inject = [ '$mdSticky' ]; 

    function Sticky($mdSticky) { 
     return { 
      restrict : 'A', 
      link : function(scope, element) { 
       $mdSticky(scope, element); 
      } 
     } 
    } 
})();

codepen например https://codepen.io/mckenzielong/pen/LpyYME

учебник можно найти здесь: https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky

источник

2017-09-12 06:36:05

Важная правая сторона nav используя угловой материал

ответ

Смежные вопросы