Mat-select 面板最小宽度

Question

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

而且我不知道它在哪里计算这个最小宽度。我还尝试添加 panelClass 并从此 class 覆盖最小宽度，例如：

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

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

但是当打开下拉菜单时，它会以原始宽度（如图所示）打开，并在几毫秒后"jump" 变为面板上定义的自定义最小宽度class。

我发现垫子 select 很难定型。有人知道如何解决这个问题吗？

Answer 1

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

原因：

延迟的原因是 angular 对于对话框，在 cdk-overlay-container 容器内创建一个 cdk-overlay-pane，所以在 mat-select 的情况下它提供了一个最小值-宽度为 180px，在轻微的延迟中被我们的面板 class 覆盖。
是的，在打开对话框并将其宽度自定义为面板中提供的指定宽度时会稍有延迟 class。但在我正在进行的项目中，延迟是可以接受的。
因此，您可以找到用于设置 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;}
}

Updated StackBlitz Demo

Answer 2

我用了另一种方法。刚刚将这段代码添加到全局样式中。

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

您可以在 DEMO StackBlitz。
当 select 关闭时，不透明度的 Hack 没有修复跳跃宽度。

Answer 3

您需要在您的组件中将 viewEncapsulation 更改为 none decorator.and 然后添加以下 css 以删除过渡 effect.Have 查看 [= 中的 viewencapsulation 17=] 文档 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;
}

Answer 4

尝试这种方式：在代码中为您的 mat-select 定义面板 class，然后在 global/app 样式文件中添加：

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

我为 material 组件添加了一些特定于组件的样式。

Mat-select 面板最小宽度

Mat-select panel min-width

angular-material

angular-material2

angular5

angular-material-6