是否可以有一个垫子分隔线(一条水平线分隔两个垫子选项)?
我试过:
<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 方法是覆盖主 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 创建了一个演示.
关于css - 将 mat-divider 添加到 mat-select/mat-option,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58037072/