将 mat-divider 添加到 mat-select/mat-option答案

【问题标题】：Adding mat-divider to mat-select/mat-option将 mat-divider 添加到 mat-select/mat-option
【发布时间】：2019-09-21 03:37:16
【问题描述】：

是否可以有一个垫分隔器（一条分隔两个垫选项的水平线）？

我试过了：

<mat-form-field>
  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <mat-divider></mat-divider>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</mat-form-field>

我现在有一个不好的解决方法是：

<mat-option>--------------------------</mat-option>

然而这并不理想。

【问题讨论】：

标签： css angular angular-material material-design

【解决方案1】：

我不确定您希望分隔线如何显示，但纯 CSS 方法是覆盖主 styles.css 上的 .mat-option 类，使用 :after pseudo element 并添加border-bottom CSS 属性的值。

.mat-option:after {
  content: '';
  width: 100%;
  border-bottom: solid 2px black;
  position: absolute;
  left: 0;
  z-index: 1;
  top: calc(3em - 2px);
}

我已经通过here 创建了一个演示。

【讨论】：

【解决方案2】：

是的，可以在 mat-select/mat-option 中添加 mat-divider

<mat-form-field>
  <mat-label> Cars </mat-label>
  <mat-select>
    <mat-option value="volvo"> Volvo </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="saab"> Saab </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="mercedes"> Mercedes </mat-option>
    <mat-divider></mat-divider>
    <mat-option value="audi"> Audi </mat-option>
  </mat-select>

希望对你有帮助

【讨论】：

如果选择覆盖多行并且高度将未设置，则这会产生主要问题。因为它会出现在选择框的中间。

【解决方案3】：

您可以使用mat-divider 本身来实现这一点，只需添加ng-container 包装mat-option 和mat-divider。然后使用last ngFor local variable 有条件地从最后一个mat-option 中删除mat-divider。

<mat-select>
    <ng-container *ngFor="let food of foods; let last = last">
        <mat-option [value]="food.value">
            {{food.viewValue}}
        </mat-option>
        <mat-divider *ngIf="!last"></mat-divider>
    </ng-container>
</mat-select>

这是StackBlitz 上的一个工作示例。

【讨论】：

是的，这个答案也有效。如果您不使用 ng-container，您可以将 mat-divider 放在标签内，例如 {{food.viewValue}}。也可以。
@Antonio 你可以这样做，但是在这种情况下，分隔线会有一个填充。所以这取决于你的要求。

【解决方案4】：

Angular material Select 文档为您提供帮助，您可以使用 panelClass 指令，就像他们展示的示例一样：

<mat-form-field>
  <mat-label>Panel color</mat-label>
  <mat-select [formControl]="panelColor"
              panelClass="example-panel-{{panelColor.value}}">//panelColor.value if you want to handle some class dynamically
    <mat-option value="red">Red</mat-option>
    <mat-option value="green">Green</mat-option>
    <mat-option value="blue">Blue</mat-option>
  </mat-select>
</mat-form-field>

这些是他们处理的css类

.example-panel-red.mat-select-panel {
  background: rgba(255, 0, 0, 0.5);
}

.example-panel-green.mat-select-panel {
  background: rgba(0, 255, 0, 0.5);
}

.example-panel-blue.mat-select-panel {
  background: rgba(0, 0, 255, 0.5);
}

所以，你可以在一个类中应用 gojun css 属性

【讨论】：

这将使整个面板具有特定的颜色。它没有回答问题。