Минимальная ширина панели выбора коврика

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

введите описание изображения здесь

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

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

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

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

Я нахожу матовый выбор очень сложным для стиля. кто-нибудь знает, как решить эту проблему?


angular-material angular-material2 angular-material-6 angular5
person Tomer Aronovsky    schedule 31.10.2018    source источник
comment
У меня такая же проблема!   -  person cheesydoritosandkale    schedule 26.12.2018

Ответы (4)


arrow_upward
7
arrow_downward

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

Причина:

  • Причина задержки заключается в том, что angular для диалоговых окон создайте 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

person Abhishek Kumar    schedule 01.11.2018
comment
Хм... это неприемлемо для моего проекта. Это отстой, лучшего решения нет. - person cheesydoritosandkale; 26.12.2018
comment
@cheesydoritosandkale посмотрите обновленный ответ, если он полезен, потому что открытие отложено и сделано плавным, а параметры выбора мата теперь открываются правильно до ожидаемой ширины. - person Abhishek Kumar; 27.12.2018
comment
@AbhishekKumar Удивительная идея. работай на меня. но вы поддерживаете только открытие панели. при закрытии он снова увеличивается на секунду, как вы рекомендуете добавить задержку при закрытии панели? - person Tomer Aronovsky; 28.12.2018
comment
@АбхишекКумар? - person Tomer Aronovsky; 07.01.2019
comment
@TomerAronovsky мой ответ поддерживает открытие панели, поскольку я применил анимацию с предоставленным классом панели, потому что при закрытии панели класс анимация не будет работать. Анимация будет работать корректно, если при открытии панели добавить класс со свойством animation, а при закрытии этот класс удалить. В этом случае анимация будет работать отлично. Итак, я попробовал события открытия и закрытия, а также некоторые другие события, указанные в официальных документах mat-select, но мне не удалось получить обработчики при открытии и закрытии mat-select. - person Abhishek Kumar; 07.01.2019
comment
@TomerAronovsky извините, что не ответил раньше, так как я забыл ответить в этой теме после попытки реализовать события открытия и закрытия в мат-выборе. - person Abhishek Kumar; 07.01.2019
comment
Мне нужно будет попробовать ваше решение. В итоге я исправил это, просто добавив .mat-select-panel { margin-right: -32px; } Что работает очень хорошо. - person cheesydoritosandkale; 11.01.2019

arrow_upward
5
arrow_downward

Я использовал другой подход. Просто добавил этот фрагмент кода в глобальный стиль.

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

Вы можете попробовать это решение на DEMO StackBlitz.
Хак с непрозрачностью не исправлял ширину прыжка при закрытии выбора.

person Mykola Novytskyi    schedule 28.05.2019
comment
Не могли бы вы добавить более подробную информацию или рабочий пример на stackblitz.com. - person Harshad Vekariya; 03.06.2019
comment
Большой! Это работа. <mat-select panelClass="triageListOptions" .triageListOptions.ng-animating { visibility: hidden; } - person shutsman; 07.11.2019

arrow_upward
1
arrow_downward

Вам нужно будет изменить 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;
}
person Anshu Prince    schedule 11.06.2019

arrow_upward
0
arrow_downward

Попробуйте так: определите класс панели для вашего коврика-выбора в коде, а затем в файле стиля global/app просто добавьте:

.panel-class-name .mat-select-panel {
 // add your styling here
}

Мне помогло добавить некоторые специфические стили для компонентов материалов.

person Sri Sruthi Dintakurty    schedule 29.11.2019