[英]Adding mat-divider to mat-select/mat-option
Is it possible to have a mat divider (a horizontal line seperating two mat-options)?是否有可能有一个垫分隔器(一条分隔两个垫选项的水平线)?
I have tried:我努力了:
<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>
A bad workaround I have now is:我现在有一个不好的解决方法是:
<mat-option>--------------------------</mat-option>
However this is not ideal.然而这并不理想。
I am not sure how exactly you want the divider to appear, but a pure CSS approach would be to overwrite the .mat-option
class on your main styles.css
, make use of the :after
pseudo element , and add a value to the border-bottom
CSS property. I am not sure how exactly you want the divider to appear, but a pure CSS approach would be to overwrite the
.mat-option
class on your main styles.css
, make use of the :after
pseudo element , and add a value to the 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);
}
Yes, It is possible to add mat-divider to mat-select/mat-option
是的,可以将 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>
Hope it helps you希望对你有帮助
You can achieve this using mat-divider
itself by just adding ng-container
to wrap mat-option
and mat-divider
.您可以使用
mat-divider
本身来实现这一点,只需将ng-container
添加到包装mat-option
和mat-divider
即可。 Then use the last
ngFor
local variable to conditionally remove the mat-divider
from the last mat-option
.然后使用
last
ngFor
局部变量有条件地从最后一个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>
Here is a working example on StackBlitz .这是StackBlitz上的一个工作示例。
Angular material Select documentation provide you help for that, you can use the panelClass directive like the example they show: Angular 材料 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>
and these are the css classes they handle这些是他们处理的 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);
}
So, you can apply wentjun css properties in a class因此,您可以在 class 中应用 gojun css 属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.