问题描述
限时送ChatGPT账号..在 mat-vertical-stepper
中,我有 4 个 mat-step
.第一步完成后如何打勾?
In mat-vertical-stepper
I have 4 mat-step
. How can I have tick-mark once 1st step is completed?
我试过了:
<mat-vertical-stepper style="background:#f2ecec;" #stepper [linear]="true">
<mat-step label="General Details" [stepControl]="generalDetailsForm" completed="true" editable="true">
<h3> Name </h3>
</mat-step>
</mat-vertical-stepper>
如果我制作 editable="false"
,它会给出一个勾号,并且不能像我制作的那样进行编辑 "false"
.只有 completed="true"
我根本没有得到任何刻度线.
If I make editable="false"
, it is giving a tick mark and can't be editable as I made it "false"
.
Having only completed="true"
I am not getting any tick mark at all.
需要帮助:
如何在 mat-step 完成后打勾获取刻度线后,刻度线应为绿色(为此必须添加CSS)推荐答案
更新 05/18(图标)
根据 docs,现在可以自定义图标,例如这个:
Update 05/18 (icons)
According to the docs, icons can now be customized like this:
<mat-vertical-stepper>
<ng-template matStepperIcon="edit">
<custom-icon>edit</custom-icon>
</ng-template>
<ng-template matStepperIcon="done">
<custom-icon>done</custom-icon>
</ng-template>
<!-- Stepper steps go here -->
</mat-vertical-stepper>
原帖
在官方文档中,它说:
注意,如果completed
和stepControl
都设置了,stepControl
将优先.
Note that if both
completed
andstepControl
are set, thestepControl
will take precedence.
因此,如果您想使用completed 属性,您需要删除您的stepControl
.
So, if you want to use the completed attribute you need to delete your stepControl
.
如果你想改变图标,你可能需要等待这个提交 合并.另外,请查看 MatStepHeader 指令.它有一个您可以设置的 icon
输入属性;例如icon="done"
为您的刻度线.
If you want to change the icon, you might have to wait for this commit to be merged. Also, have a look at the MatStepHeader directive. It has an icon
input property you can set; e.g. icon="done"
for your tick mark.
似乎还没有通过 API 更改颜色的选项.作为一种解决方法,您可以使用以下方法:
There does not seem to be an option to change the color via the API, yet. As a workaround, you could use something like:
/deep/ .mat-step-header .mat-step-icon {
background-color: red;
}
这篇关于用于在 mat-vertical-stepper 中完成 mat-step 的 CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论