Angular 材质：防止滑块与菜单重叠答案

【问题标题】：Angular Material: Prevent Slider from Overlapping with MenuAngular 材质：防止滑块与菜单重叠
【发布时间】：2021-05-16 18:11:17
【问题描述】：

我刚开始使用 Angular Material 并遇到滑块组件与我的菜单重叠的问题。

如何确保滑块显示在菜单下方 - 是否可以设置一些不重叠的标志来完成此操作？

可能 html 代码如下所示：

<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
<mat-menu #belowMenu="matMenu" [overlapTrigger]="false" yPosition="below">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
<mat-menu #beforeMenu="matMenu" xPosition="before">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
<mat-menu #afterMenu="matMenu" xPosition="after">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

非常感谢您的帮助！

最好的问候，山姆

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

您可以尝试以这种方式在您的样式中使用flex-wrap：

display: flex; flex-wrap: wrap;

这是一个简单的 sn-p 将其添加为内联样式，但我建议您将它们添加到单独的文件中并使用类引用 div。

希望对你有帮助！

<div style="display: flex; flex-wrap: wrap;">
  <div style="width: 100%;">
    <button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
    <button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
    <button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
    <button mat-button [matMenuTriggerFor]="afterMenu">After</button>
  </div>
  <div style="width: 100%;">
    <input type="range" min="1" max="100" value="50">
  </div>
</div>

更多关于 flex 和 flex-wrap 的信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

【讨论】：

这对你真的很有帮助！
很高兴听到这个消息！