javascript - 使用 css 或 html 在封闭的角材料手风琴面板之间添加填充

Question

我很好奇如何在面板之间添加填充/边距（空格）。寻找 html/css 解决方案。

https://material.angular.io/components/expansion/examples

有任何想法吗？

accordion-payment-panel {
margin-bottom: 10px!important; // won't work
}

Answer 1

尝试在 css 中添加此代码：

.mat-accordion .mat-expansion-panel{
  margin-bottom: 10px;
}

Answer 2

我相信这可以解决您的问题：

.mat-accordion .mat-expansion-panel:not(.mat-expanded),
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
   margin-bottom: 20px;
}

链接到github中的代码

Answer 3

这是创建的材料角度站点的示例，它正确生成了间距：

 <mat-accordion class="example-headers-align">
     .....
 </mat-accordion>

然后对于.css：

.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.example-headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

.example-headers-align .mat-form-field + .mat-form-field {
  margin-left: 8px;
}