垫选择面板最小宽度答案

【问题标题】：Mat-select panel min-width垫选择面板最小宽度
【发布时间】：2019-04-05 03:40:43
【问题描述】：

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

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

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

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

但是当打开下拉菜单时，它会以原始宽度打开（如图所示），并在几毫秒后“跳转”到面板类上定义的自定义最小宽度。

我发现 mat-select 很难设置样式。有人知道如何解决这个问题吗？

【问题讨论】：

我也有同样的问题！

标签： angular-material angular5 angular-material2 angular-material-6

【解决方案1】：

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

原因：

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

【讨论】：

嗯……这对我的项目来说是不可接受的。可惜没有更好的解决方案。
@cheesydoritosandkale 查看更新后的答案，如果它有帮助，因为打开被延迟并变得平滑，并且 mat-select 选项现在正确打开到预期的宽度。
@AbhishekKumar 惊人的想法。为我工作。但您只支持打开面板。关闭时它再次变大一秒钟，您建议如何在关闭面板时添加延迟？
@AbhishekKumar ?
@TomerAronovsky 我的答案支持打开面板，因为我已经使用提供的 panelClass 应用了动画，因为关闭 panelClass 动画将不起作用。如果在打开面板时应添加带有动画属性的类，并且在关闭时应删除该类，则动画将正常工作。在这种情况下，动画将完美无缺。所以我尝试了打开和关闭事件，以及 mat-select 的官方文档中给出的其他一些事件，但是在 mat-select 的打开和关闭时获得处理程序没有运气。

【解决方案2】：

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

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

你可以试试这个解决方案 DEMO StackBlitz。
选择关闭时，具有不透明度的黑客不会修复跳跃宽度。

【讨论】：

您能否在stackblitz.com 上添加更多详细信息或工作示例。
太棒了！这是工作。 <mat-select panelClass="triageListOptions".triageListOptions.ng-animating { visibility: hidden; }

【解决方案3】：

您需要在组件装饰器中将 viewEncapsulation 更改为 none。然后添加以下 css 以移除过渡效果。查看 angular docs https://angular.io/guide/component-styles#view-encapsulation 中的 viewencapsulation。

@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;
}

【讨论】：

【解决方案4】：

试试这个方法：在代码中为你的 mat-select 定义一个面板类，然后在 global/app 样式文件中添加：

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

为材料组件添加一些特定于组件的样式对我很有用。

【讨论】：