Установите ширину нижнего листа в угловой материал 2 - PullRequest
Новая
       19

Установите ширину нижнего листа в угловой материал 2

0 голосов
/ 26 июня 2018

Могу ли я установить ширину нижнего листа в угловом материале 2 (фиксированное или в процентах)?

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

В дополнение к Tabrez Ahmed s отличный ответ: если вы хотите установить ширину 100% соответственно 100vw, вам нужно добавить следующее в styles.css избегать левого и правого пробелов: 

.custom-width {
  width: 100vw;
}

.mat-bottom-sheet-container-large, .mat-bottom-sheet-container-medium, .mat-bottom-sheet-container-xlarge {
  /* unset maximum width */
  max-width: unset !important;
}

.mat-bottom-sheet-container-large, .mat-bottom-sheet-container-medium, .mat-bottom-sheet-container-xlarge {
  /* remove border radius */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
0 голосов
/ 26 июня 2018

Используйте параметр конфигурации panelClass.Например:

В styles.css: (Глобальный файл стилей, а не файл component.css) 

.custom-width {
    width: 450px;
}

In your component.ts: 

this.bottomSheet.open(BottomSheetOverviewExampleSheet, {
  panelClass: 'custom-width'
});

https://stackblitz.com/angular/qvokqxjgbrn

Примечание: Будет работать только ширина в пикселях.

...