如何在 Angular material 中的相同 html 中分离组件？

Question

我在 Angular material 中有一个项目，其中有一个 component.html，我在其中定义了一个表单和一个带有数据的 table。

在我的项目（第一张图片）中，我有选项卡的标题、添加新记录的表单和显示记录的 table。我想要实现的是和第二张图一样，组件是重叠的。

这是我现在的 window:

这就是我想要实现的目标：

这是我的 component.html:

<div class="title">Customer registration</div>
<mat-divider></mat-divider>

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>New</mat-expansion-panel-header>
    <form [formGroup]="formNew">
      <mat-grid-list cols="4" rowHeight="50px" gutterSize="10px">
        <mat-grid-tile>
          <mat-form-field fxFlex>
            <input matInput placeholder="ID" formControlName="id">
          </mat-form-field>
        </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="First Name" formControlName="first_name">
              <mat-icon matSuffix>person_outline</mat-icon>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Last Name" formControlName="last_name">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Phone" formControlName="phone">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <div>
              <button mat-stroked-button (click)="save()">Add</button>
            </div>
          </mat-grid-tile>
      </mat-grid-list>
    </form>
  </mat-expansion-panel>
</mat-accordion>

<mat-card class="mat-elevation-z8">
  <mat-table [dataSource]="customers">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nombre">
      <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.first}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="apellido">
      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.last}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="telf">
      <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.phone}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="act">
      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-button><mat-icon>edit</mat-icon></button>
        <button mat-button><mat-icon>delete_forever</mat-icon></button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</mat-card>

我的问题：我怎样才能将组件分开，以便在照片中看到不同的层次？

Answer 1

可以使用纯 CSS 创建 box-shadow 效果。所以所有内容都应该放在 div:

里面

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.foo-margin {
  margin: 15px;
}
.shadow {
  width: 100%;
  height: 100%;

  background-color: lightgreen;
  box-shadow: 0px 0px 3px 3px lightgrey;
}

<div class="foo-margin">
<p>Documentos</p>
<div class="shadow ">All your HTML elements should be placed here</div>
</div>

更新：

可以添加一个 class 为您的按钮使用 absolute 定位：

<mat-grid-list cols="4" rowHeight="2:1">
  <mat-grid-tile colspan="4">
    <button class="button-right-inside-tile">Foo Button</button>    
  </mat-grid-tile>  
</mat-grid-list>

和class：

.button-right-inside-tile {
  position: absolute;
  right: 5px;
}

A complete stackblitz example can be seen here.

如何在 Angular material 中的相同 html 中分离组件？

How can I separate components within the same html in Angular material?

css

grid

angular-material

angular

angular11