展开手风琴时去除边距角材料

Question

在此先感谢您的帮助。我正在尝试删除手风琴的空白，如本示例stackblitz所示， 但我不知道如何使用MatAccordionDisplayMode ='flat'删除边距。 有人可以帮我吗？

Answer 1

您是指“年龄”文本框左侧的边距吗？

如果是这样，只需将margin-left设为零即可。

<mat-form-field style="margin-left: 0">
  <mat-label>Age</mat-label>
  <input matInput type="number" min="1">
</mat-form-field>

Answer 2

如果我很了解，您希望将两个面板粘合在一起，而彼此之间没有任何余量。

为此，请将其添加到您的 component.css

.mat-expansion-panel-spacing{
  margin:0;
}

.mat-expansion-panel:not(:last-child){
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
}

这是结果

此外，通过为border-bottom-right/left-radius:0px;添加.mat-expansion-panel:not(:last-child)，可以删除如果粘贴了手风琴面板会造成可怕的边界半径。