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

Question

无论我使用什么屏幕尺寸,Sidenav总是相同的尺寸.我尝试添加诸如 - flex - 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并且50仅在Chrome上进行了测试。

使用此CSS对我有用：

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

Answer 5

如果有人使用最新版本来到这里mat-sidenav，您可以显式设置元素的宽度。

mat-sidenav {
  width: 200px;
}

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