垫选择面板最小宽度 [英] Mat-select panel min-width

问题描述

我正在尝试使用多个复选框自定义 mat-select.由于某种原因，面板错误的最小宽度如下:

I'm trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below:

而且我不知道它在哪里计算这个最小宽度.我还尝试添加 panelClass 并覆盖此类的最小宽度，例如:

and I don't know where its calculating this min-width. also I tried to add panelClass and override the min-width from this class, for example:

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

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

但是当打开下拉菜单时，它以原始宽度(如图片所示)打开，几毫秒后跳转"到面板类上定义的自定义最小宽度.

but when opening the dropdown its open with the original width (like in the pic) and after few millisecond"jump" to the custom min-width defined on the panel class.

我发现 mat-select 很难设计.有人知道如何解决这个问题吗?

I find the mat-select very hard to style. anybody knows how to solve this problem?

推荐答案

您可以通过提供面板类(如您所述)来设置 mat-select 对话框的样式.
请关注这个演示:https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
查看样式化的 mat-select 组件.

You can style your mat-select dialog box by giving a panel class (as you mentioned).
Please follow this demo : https://stackblitz.com/edit/angular-matselect-style?file=src/styles.css
to see the styled mat-select components.

原因:

• 延迟的原因是对话框的角度问题，请在 cdk-overlay-container 容器内创建一个 cdk-overlay-pane，所以如果 cdk-overlay-containercode>mat-select 它提供了一个 180px 的最小宽度，它会被我们的面板类稍微延迟覆盖.
• 是的，打开对话框并将其宽度自定义为面板类中提供的指定宽度时有轻微延迟.但是在我正在进行的项目中延迟是可以接受的.
  因此，您可以找到 mat-select 组件样式的演示，因为我提供了 2 个组件，您可以修改任何 css 属性.
• 尝试使用::ng-deep或:host >>>的样式，如果没有找到任何运气，
  请粘贴样式在 style.css 中.

• Reason for the delay is that angular for dialog-boxes, create a cdk-overlay-pane inside the cdk-overlay-container container, So in case of mat-select it provides a min-width of 180px, which is overridden by our panel class in the slight delay.
• Yes, there is a slight delay in opening of dialog box and customizing its width to the specified width provided in the panel class. But the delay is acceptable in the project that i was working on.
  So, you can find the demo for styling the mat-select component, as i have provided 2 components and you can modify any css properties.
• Try to use styles using ::ng-deep or :host >>>, if not finding any luck,
  please paste the styles in style.css.

更新 1:
尝试了 css 动画 和 opacity 以平滑打开 mat-select 选项.

Update 1 :
Tried css animations, and opacity for making smooth opening of the mat-select options.

.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 演示

这篇关于垫选择面板最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！