Angular-материал - анимация и позиция не отображаются правильно - PullRequest
Новая
       10

Angular-материал - анимация и позиция не отображаются правильно

0 голосов
/ 08 декабря 2018

Я пытаюсь открыть и анимировать сверху, а также правильно (то же поведение, что и снизу при открытии и закрытии), но не могу сделать это в угловом материале.

Он должен закрываться только по нажатию кнопки закрытия и без каких-либо других действий и как получить значение выбранного фишки при каждом щелчке в методе ts.

Любой другой способ достижения цели, т. Е.чтобы получить верхний лист, как у нас, нижний лист также приветствуется.

https://stackblitz.com/edit/angular-fkfckf-twerla?file=app%2Fbottom-sheet-overview-example-sheet.html

1 Ответ

0 голосов
/ 08 декабря 2018

К сожалению, для этого нет функциональности, поскольку он был разработан как bottom-sheet ... поэтому вам нужно будет переопределить некоторые CSS, чтобы сделать это ... Вы можете сделать следующее, чтобы добиться этого.

set disableClose в конфигурации 

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true
    });

Переопределить CSS 

@Keyframes slideDown{
 0%{ opacity: 0 }
 100%{ 
  opacity: 1;
  transform: translateY(0%);
 }
}

::ng-deep .cdk-overlay-pane{
  top: 0 !important;
  position: absolute !important;
  transform: translateY(-250%);
  animation: slideDown 0.5s forwards 0s ease-in;
}

::ng-deep .cdk-overlay-container > * {
 animation: none;
}

Вы также можете передать пользовательский класс, если вы не хотите переопределять css глобально и использоватьдочерние селекторы. 

this.bottomSheet.open(BottomSheetOverviewExampleSheet,{
      disableClose: true,
      panelClass: 'some-custom-class-here'
    });

Обратите внимание: вам нужно будет продолжить работу над этой концепцией, если вы хотите управлять анимацией закрытия, выходящей за пределы стекаблица.

Stackblitz

https://stackblitz.com/edit/angular-fkfckf-sslp2l?embed=1&file=app/bottom-sheet-overview-example.ts

...