使用角度材料粘贴右侧导航

Question

我正在尝试使用角度材料以及顶部的固定工具栏来获得固定的右侧边栏。 我似乎错过了一些东西，因为它似乎根本不起作用。 我试图用它制作一支笔，请让我知道如何解决它。 以下是我的md内容代码

<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

Answer 1

尝试这样的事情。 我将sidenav和内容设置为布局行。 从md-sidenav中删除了flex属性，而是将其分配到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>

Answer 2

<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>

在md-card repeat周围添加了一个div，并将md-sidenav放在它旁边。 还从body标签中删除了布局。 这允许侧导航弯曲到页面的底部。

Answer 3

你可以尝试使用角度材料的$ 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

使用角度材料粘贴右侧导航

问题描述

3 个解决方案

解决方案1
0 2016-05-24 14:47:17

解决方案2
0 2016-05-24 20:28:19

解决方案3
0 2017-09-12 06:36:05

使用角度材料粘贴右侧导航

问题描述

3 个解决方案

解决方案1 0 2016-05-24 14:47:17

解决方案2 0 2016-05-24 20:28:19

解决方案3 0 2017-09-12 06:36:05

解决方案1
0 2016-05-24 14:47:17

解决方案2
0 2016-05-24 20:28:19

解决方案3
0 2017-09-12 06:36:05