Question

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

我尝试过：

<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>

但这并不理想。

Answer 1

我不确定您希望分隔符出现的确切程度，但是纯CSS方法是使用.mat-option覆盖主styles.css上的: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上创建了一个演示。

Answer 2

角度材料选择文档为您提供了帮助，您可以像显示的示例一样使用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);
}

因此，您可以在一个类中应用wonjun css属性

Answer 3

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

<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上的一个有效示例。

Answer 4

是的，可以将mat-divider添加到mat-select / mat-option

<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>

希望它对您有帮助

将垫子分隔器添加到垫子选择/垫子选项

4 个答案: