Панель расширения матов распространяется на другие элементы HTML - PullRequest
Новая
       24

Панель расширения матов распространяется на другие элементы HTML

0 голосов
/ 31 августа 2018

У меня есть матовая панель расширения, которую я хотел бы вытянуть над элементом под ним, а не просто переместить этот элемент вниз. Я попытался настроить z-индекс элемента расширения мат, но это не сработало. Я не видел ничего в угловых материалах docs / github, которые бы указывали на то, что это можно сделать. Кто-нибудь делал это или знает, как этого достичь?

Любая помощь / советы / предложения будет принята с благодарностью.

my expansion

UPDATE: Мое желаемое решение должно выглядеть примерно так. Может содержать несколько элементов (выбор циновки, выбор даты и т. Д.)

enter image description here

1 Ответ

0 голосов
/ 04 сентября 2018

Большое спасибо @wixFitz за то, что меня направили в правильном направлении, но вот конечный продукт. enter image description here

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
  }
...