如何在 Angular Material Design 中更改 Sidenav 的宽度？

Question

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

似乎找不到好的方法。

Answer 1

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

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

这就是为什么无论您使用什么设备，宽度都会固定为 304 px。 因此，如果您想更改侧边导航宽度，则必须稍微更改 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;
}

我目前正在使用 Angular-Material

1.0.8

并仅使用 Chrome

50

进行测试。

这个 CSS 对我有用：

• 动画关闭再打开OK
• 锁定时OK
• 未锁定时OK

Answer 5

如果有人使用最新的

mat-sidenav

来到这里，您可以显式设置元素的宽度。

mat-sidenav {
  width: 200px;
}

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

Answer 6

这是一个有点“卡顿”的解决方案，但它根本不会扰乱动画。侧导航会自动调整自身大小，以使其内部项目的顺序完美贴合。因此，您只需在垫子抽屉中添加一个具有您选择的宽度的跨度即可设置最小尺寸。请注意，这仅适用于设置最小宽度，而不适用于最大宽度。

<span style="height: 0px; width: 200px; display: inline-block;"></span>

Answer 7

我也遇到了这个问题 - 尽管

304px

宽度足够，但我在右侧的内容区域中有一张卡片挤压了侧边导航。 因此，使用 Flex 网格，我可以添加

<md-sidenav flex="15" class="md-sidenav-left ...

来获得我想要的宽度，而无需覆盖 CSS。 听起来这对你不起作用，所以也许它与你设计中的布局选项有关......

Answer 8

在 Angular Material 18 中，这要容易得多。 您可以直接在 mat-drawer 组件中设置自定义属性 --mat-sidenav-container-width 。

mat-drawer {
    --mat-sidenav-container-width: 12.5rem;
}

或将其添加到您的根目录或主机

:root {
    --mat-sidenav-container-width: 12.5rem;
}

通过在 :root 中定义该属性，它可以全局使用，从而影响应用程序中 mat-drawer 的所有实例。