如何设置角材料扩展面板的宽度以适合网格图块

Question

我想使用 Material 的 GridList 组件来制作两列布局。我在里面放置了 ExpandPanel，但它们位于图块的中心。我需要它们来适应水平空间。当然，我可以为组件放置一个类属性并设置宽度，但我不确定这是否是执行此操作的最佳“材料”方式。这是我的测试示例：

<mat-grid-list cols="2" ratio="2:1">
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true' >
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE
        </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-form-field>
         <input matInput placeholder="TEST">
       </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true'>
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE2
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="TEST">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
</mat-grid-list>

我对角度和材料很陌生。我很乐意接受一些建议。

Answer 1

您可以只在 css 文件中定位 mat 标签，我不确定 mat-expansion-panel 是否包含预定义属性来处理它。只需添加

 mat-expansion-panel {
    width: 100%;
  }