Question

我有一个垫子扩展面板，我想将其扩展到其下方的元素上，而不是简单地向下移动该元素。我尝试调整了mat-expansion元素的z-index，但是没有用。我没有在有角度的材料docs / github中看到任何建议可以做到的事情。有没有人做过或者知道如何实现？

任何帮助/提示/建议将不胜感激。

更新：我想要的解决方案应与此类似。它可能包含多个元素（mat选择，日期选择器等）。

Answer 1

非常感谢@wixFitz使我朝着正确的方向前进，但这是最终产品。

animation.html：

      <div class="report-filter">
    <button 
      mat-raised-button 
      class="filter-button"
      type="button"
      (click)="showDiv()"
      [ngClass]="{'menu-button-active': filterActive}">
      {{ 'TOOLTIP.filter' | translate }}
      <mat-icon>filter_list</mat-icon>
    </button>
    <div [@divState]="divState" class="menu mat-elevation-z8">
      <button
        class="center"
        mat-button
        (click)="closeMe()"
        mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
      <div class="search-brands">
        <mat-form-field>
          <mat-select placeholder="Brands" [(value)]="selectedBrand" panelClass="brandSelectDropdown">
            <mat-option (click)="resetBrand()" value="">none</mat-option>
            <mat-option *ngFor="let brand of brands" (click)="setBrand(brand.brand)" value="brand.brand">{{ brand.brand }}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </div>

animation.scss：

.report-filter {
 display: flex;
 .filter-button {
 margin: 1rem 0;
}

}

.menu {
 position: absolute;
 top: 248px;
 right: 23px;
 background-color: $grey600;
 border: 1px solid gray;
 border-radius: 4px;
 z-index: 2;
 .search-brands {
  margin: 2rem 1rem;
  border: 1px solid black;
  background-color: $grey300;
  mat-form-field {
   width: 95%;
   margin: 0rem .5rem;
  }
}
button {
 mat-icon {
  color: white;
  margin: 0 0 0 0;
  }
 }
}
.menu-button-active {
 background-color: $grey600;
 color: white;
}

animation.ts： 在@Component对象中

  animations: [
   trigger('divState', [
    state('show', style({ height: '100vh', width: '20vw' })),
    state('hide', style({ height: '0vh', display: 'none'})),
    transition('show => hide', animate('200ms ease-out')),
    transition('hide => show', animate('300ms ease-in'))
   ])
  ]

全局变量

  divState: string = "hide";

打开和关闭功能

  showDiv(){
   this.divState = (this.divState == 'hide') ? 'show' : 'hide';
   this.filterActive = !this.filterActive
   this.getBrands();
  }

  closeMe(){
   this.divState = 'hide';
   this.filterActive = !this.filterActive
  }

Mat扩展面板扩展到其他html元素之上

1 个答案: