Question

我想使用Material的GridList组件进行两列布局。在内部，我已经放置了ExpandPanels，但是它们位于图块的中心。我需要它们来适应水平空间。当然，我可以在组件上放置一个class属性并设置宽度，但是我不确定这样做是否是最好的“素材”方式。这是我的测试示例：

<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%;
  }

Answer 2

我将<mat-grid-tile>放在<div class="tilefix">内，并为div创建了一个css类，给出了以下样式，并解决了该问题。

.tilefix{
    position: absolute;
    width: 100%;
    height: 100%; 
}

在下面您可以看到

<div class="tilefix">
      <mat-accordion multi="true" >
               <mat-expansion-panel  >
                     <mat-expansion-panel-header>
                          Header is here
                     </mat-expansion-panel-header>
                            <p>some text</p>
                </mat-expansion-panel>
                <mat-expansion-panel >
                   <mat-expansion-panel-header>
                          Header is here
                   </mat-expansion-panel-header>
                          <p>some text</p>
                   </mat-expansion-panel>                     
       </mat-accordion> 
 </div>

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

2 个答案: