角度素材を使用したスティッキー右側のナビ

角度のある素材を使用して固定された右側のサイドバーを、上に固定されたツールバーと共に取得しようとしています。私は何かが欠けているように思えるので、全く役に立たないようです。私はそれからペンを作ろうとしました、それを修正する方法を教えてください。続きはこのような何かを試してみてください、私の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

出典

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

これは、スクロールを作成していることを除いてはほぼ良好ですスクロールバーではなく、コンテンツ領域のバーを表示します。私はそれを修正することができます。あなたが提案した変更でcodepenを修正しました。 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>

はMD-カードリピート周りのdivを追加しましたし、隣にMD-sidenavを置きました。また、bodyタグからレイアウトを削除しました。これにより、サイドナビゲーションをページの下部に移動させることができます。

出典

2016-05-24 20:28:19 nitimalh

返信いただきありがとうございます。しかし、これはスクロールバーを削除しましたが、固定されたツールバーが削除され、さらにsidenav bar is notが修正されました。私はそれを更新することによってcodepenで試しました。 http://codepen.io/viggy_prabhu/pen/xVvQzr – viggy

残念ですが、bodyタグを次のように変更すると、そのプロパティを決定する親であるためnavbarを固定したままにします ' ' sidenavをスティッキーにするには、css要素を追加する必要があります。角度のある素材がそれを箱から提供するとは思わない。 – nitimalh

することができますチュートリアルはここで見つけることができhttps://codepen.io/mckenzielong/pen/LpyYME

角度材料

(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例から$ mdStickyサービスを使用してみてください： https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky

出典

2017-09-12 06:36:05

角度素材を使用したスティッキー右側のナビ

答えて

関連する問題