29

无论我使用什么屏幕尺寸，Sidenav 始终是相同的尺寸。我尝试添加诸如 - flex - flex="85" 之类的属性（以获取其容器的 85%）

似乎找不到好的方法。

4

7 回答 7

44

在 Angular 材质中，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

于 2014-12-24T15:32:45.380 回答
8

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

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

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

于 2016-01-02T03:00:02.373 回答
7

感谢 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;
}
于 2015-04-16T07:44:14.527 回答
5

在此线程中尝试不同的 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;
}

我目前正在使用 angular-material1.0.8并仅使用 Chrome 进行测试50。

有了这个 CSS 对我有用：

  • 动画关闭和打开 OK
  • 锁定时 OK
  • 未锁定时 OK
于 2016-05-11T15:23:35.550 回答
1

这是一个有点“卡顿”的解决方案，但它根本不会弄乱动画。sidenav 会自动按照其中的项目的顺序调整自身大小以完美匹配。因此，您只需将具有您选择的宽度的跨度添加到垫子抽屉中即可设置最小尺寸。请注意，这只适用于设置最小宽度，而不是最大宽度。 <span style="height: 0px; width: 200px; display: inline-block;"></span>

于 2020-12-05T00:25:28.983 回答
0

我也遇到了这个问题——尽管304px宽度很大，但我在右侧的内容区域中有一张卡片正在挤压侧导航。因此，使用 flex 网格，我可以在<md-sidenav flex="15" class="md-sidenav-left ...不覆盖 CSS 的情况下添加我想要的宽度。听起来这对您不起作用，因此可能与您设计中的布局选项有关...

于 2015-01-20T21:37:01.823 回答
0

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

mat-sidenav {
  width: 200px;
}

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

于 2021-06-28T04:07:52.167 回答