Question

我想要一个mat-grid-list来适合垫卡的内容。我期望得到等距的列。每行4张卡片。我一团糟。如果我将mat-card的内容替换为纯文本，则看起来不错。如何以这种方式正确显示mat-form-fields？

<mat-tab-group>
  <mat-tab label="Active">
    <mat-grid-list cols="4" rowHeight="100px" gutterSize="50px">
      <mat-grid-tile *ngFor="let number of [0,1,2,3,4,5,6,7,8]">
        <mat-card>
          <div class="example-container">
            <mat-form-field>
              <input matInput placeholder="Input">
            </mat-form-field>
            <mat-form-field>
              <textarea matInput placeholder="Textarea"></textarea>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Select">
                <mat-option value="option">Option</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </mat-tab>
</mat-tab-group>

我没有在test.component中添加任何额外的/自定义CSS。

请注意，如果您已在4K显示器上完全将其展开，则看起来确实可以。对齐方式已关闭，但此处至少没有内容完全丢失。它是4k上较小的... 2k或3/4屏幕，它开始修剪内容。

我需要为此切换到自定义Flexbox吗？

这是我的 target 外观：（理想情况下，列数会以较小的分辨率自动移动）

stackblitz

Answer 1

使用现有的堆叠闪电战，您可以进行这两项更改以获得所需的内容

将您的 card-overview-example.css 替换为：

.mat-card { display:inline-block; max-width:200px; min-width:100px; margin:0 10px; }

将您的 card-overview-example.html 替换为：

<mat-tab-group>
  <mat-tab label="Active">
    <ng-container *ngFor="let number of [0,1,2,3,4,5,6,7,8]">
        <mat-card >
          <h2>Some Name</h2>
          <div class="example-container">
            <mat-form-field>
              <input matInput placeholder="Input">
            </mat-form-field>
            <mat-form-field>
              <textarea matInput placeholder="Textarea"></textarea>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Select">
                <mat-option value="option">Option</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </mat-card>
      </ng-container>
  </mat-tab>
</mat-tab-group>

角度mat-grid-list不符合预期的内容

1 个答案: