附加侧边栏覆盖Angular Material flex行

Question

当屏幕尺寸小于1200px左右时，我们的想法是让侧边栏保持在顶部。当屏幕尺寸大于1200px时 - 当用户向下滚动页面时，应固定侧边栏。目前，附加边栏<div class="content-wrapper" layout="row" layout-wrap>会干扰邻居容器<div class="content-wrapper" layout="row" layout-wrap>。如何让<div class="side-tool-panel" layout="column">自动转换并弥补{{1}}的空间？

codepen

Answer 1

您可以使用角度材质的layout system来做到这一点。试试这个：

<div ng-app="MyApp" ng-controller="AppCtrl" class="dialogdemoBasicUsage" id="popupContainer" ng-cloak="" layout="column" layout-gt-md="row" layout-wrap>
    <div class="side-tool-panel" layout="column" flex-gt-md="15"></div>
    <div class="content-wrapper" layout="row" layout-wrap flex-gt-md="85"></div>
</div>

在此代码中，我使用layout-gt-md width >= 1280px。然后，我在2个孩子flex-gt-md中使用div。 Here

希望得到这个帮助。