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 =＆＃34; 33＆＃34;和flex =＆＃34; 66＆＃34;]。

<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

    Set xmlDoc = CreateObject("Microsoft.XMLDOM")
    xmlDoc.Async = "False"
    xmlDoc.Load("programs.xml")

    strQuery = "/steps/step"

    Set colNodes = xmlDoc.selectNodes( strQuery )

    For Each objNode in colNodes
        strDescription = objNode.SelectSingleNode("description").text
    Next

在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 个答案: