Коврик-панель минимальной ширины - PullRequest
Новая
       49

Коврик-панель минимальной ширины

0 голосов
/ 01 ноября 2018

Я пытаюсь настроить выбор мат с несколькими флажками. по какой-то причине панель имеет неправильную минимальную ширину, как показано ниже:

enter image description here

и я не знаю, где вычисляется эта минимальная ширина. также я попытался добавить panelClass и переопределить min-width из этого класса, например: 

<mat-select #multipleSelect (selectionChange)="selectItem($event.value)" panelClass="multiple-panel" multiple>      

&.multiple-panel {
   min-width: 200px !important;
}

но при открытии раскрывающегося списка он открывается с исходной шириной (как на картинке) и через несколько миллисекунд «прыгает» к пользовательской минимальной ширине, определенной в классе панели.

Мне трудно подобрать коврик для одежды. Кто-нибудь знает, как решить эту проблему?

Ответы [ 3 ]

0 голосов
/ 28 мая 2019

Я использовал другой подход. Только что добавил этот кусок кода в глобальный стиль. 

.mat-select-panel {
// some your code
  &.ng-animating {
       visibility: hidden;
    }
  }

Вы можете попробовать это решение на ДЕМО StackBlitz .
Хак с непрозрачностью не исправил ширину прыжка при закрытии select.

0 голосов
/ 11 июня 2019

Вам нужно изменить viewEncapsulation на none в вашем компонентном декораторе, а затем добавить следующую CSS для удаления эффекта перехода. Посмотрите на viewencapsulation в угловых документах https://angular.io/guide/component-styles#view-encapsulation.

@Component({
selector: 'app-selector',
templateUrl: './template.html',
styleUrls: ['./template.css'],
encapsulation: ViewEncapsulation.None
})
//CSS
.cdk-overlay-connected-position-bounding-box .cdk-overlay-pane .mat-select-panel.ng-animating {
display: none;
}
0 голосов
/ 01 ноября 2018

Вы можете оформить свое диалоговое окно mat-select, указав класс панели (как вы упомянули).
Пожалуйста, следуйте этой демонстрации: https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
чтобы увидеть стилизованные mat-select компоненты.

Причина:

  • Причиной задержки является то, что угловые значения для диалоговых окон: создайте cdk-overlay-pane внутри контейнера cdk-overlay-container, поэтому в случае mat-select он обеспечивает минимальную ширину 180 пикселей, которая переопределяется классом нашей панели в небольшой задержке.
  • Да, имеется небольшая задержка при открытии диалогового окна и настройке его ширины в соответствии с указанной шириной, указанной в классе панели. Но задержка приемлема в проекте, над которым я работал.
    Итак, вы можете найти демонстрационную версию для стилизации компонента mat-select, так как я предоставил 2 компонента и вы можете изменить любые свойства CSS.
  • Попробуйте использовать стили, используя ::ng-deep или :host >>>, если не найдете удачи,
    , пожалуйста, вставьте стили в style.css.


Обновление 1:
Пробовал css animations и opacity для плавного открытия опций mat-select. 

.panel-class-applied-on-mat-select {
  animation-name: opacityDelay !important;
  animation-duration: 0.3s !important;
}

@keyframes opacityDelay {
   0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0;}
  75%  {opacity: 0;}
  100% {opacity: 1;}
}

Обновленная демонстрация StackBlitz

...