Question

无论我使用什么屏幕尺寸，Sidenav总是大小相同。我尝试添加诸如的属性 - 柔性 - flex =“85”（获得85％的容器）

似乎无法找到一个好方法。

Answer 1

在角度材质中，md-sidenav具有以下属性：

width: 304px;
min-width: 304px;

这就是为什么无论您使用什么设备，宽度都将固定为304像素。因此，如果你想改变你的sidenav宽度，你必须稍微改变一下css。

如果您只支持现代浏览器，则可以将其更改为vw度量（视口宽度的1/100）并将其添加到单独的css文件中。代码看起来像这样：

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 85vw !important;
    max-width: 400px !important;
}

这是一个掠夺者：http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview

Answer 2

user3587412提交的答案允许我更改宽度，但我遇到了与Craig Shearer相同的问题，因为它杀死了动画。所以我尝试了一些不同的东西并想出了这个。

 md-sidenav.md-locked-open {
   width: 250px;
   min-width: 250px;
   max-width: 250px;
 }

我不确定这是否正确，但似乎对我有用。

Answer 3

感谢user3587412，我可以轻松找到所需的样式。要使md-sidenav调整为flex父级，只需覆盖

md-sidenav, 
md-sidenav.md-locked-open, 
md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 0px !important;
    width: auto !important;
    max-width: none !important;
}

Answer 4

在此线程中尝试不同的CSS后，我最终得到：

md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
}

我目前使用角度材质1.0.8并仅使用Chrome 50进行测试。

使用这个CSS对我有用：

动画关闭并打开确定
锁定时确定
未锁定时确定

Answer 5

这是一个有点“垃圾”的解决方案，但它完全不会与动画混淆。 sidenav会自动调整其大小，以使其内部的项目完全适合。这样，您可以将具有所选宽度的跨度添加到垫子抽屉中以设置最小尺寸。请注意，这仅适用于设置最小宽度，而不是最大宽度。 zoomRecycler.onZoom { // exception here : zoomButton must be not null zoomButton.setImageDrawable(...) } zoomButton.click { // calling zoom which raise onZoom inside zoomRecycler zoomRecycler.toggleZoom(); }

Answer 6

如果有人使用最新的 mat-sidenav，您可以明确设置元素的宽度。

mat-sidenav {
  width: 200px;
}

文档警告不要使用基于百分比的大小。 https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size

Answer 7

我也遇到过这个问题 - 尽管304px宽度很大，但我在右边的内容区域有一张卡片正在挤压侧面。所以，使用flex网格，我能够添加<md-sidenav flex="15" class="md-sidenav-left ...来获得我想要的宽度而不会覆盖CSS。听起来这对你没用，所以也许它与你设计中的布局选项有关......

如何在角度材料设计中更改Sidenav的宽度？

7 个答案: