angular / angular/components

Support disabling steps in the Stepper

未关闭
#17,294 9 条评论 18 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/stepper feature P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

Description: I am submitting a feature request to add a simple [disable] property to a mat-step. This would allow you to pass in a boolean that's maintained in your component to disable or enable a mat-step dynamically.

Use Case: I've come across a situation where I need to navigate to the third step of a horizontal stepper on 'view'. So basically skip all the creation and editing steps and just go straight to the step that shows my summary of what I've done. I searched for a while to try to find a nice way to disable a mat-step. People were suggesting using the [completed] or [editable] properties but none of those disabled the step. I was able to still navigate to it if and edit fields if I clicked on it. What I ended up doing was dynamically hiding the headers using css and [ngClass]. Obviously this is a bit of a hacky workaround and I'd love to just be able to disable the step by passing it a 'viewMode' boolean which I'm doing for other areas of the component to show and hide content I want the user to see based on what mode they're in. The UX designers at my company want to be able to see the other steps even though we wouldn't be able to navigate to them to keep the same look and feel. So essentially just make the header of the mat-step not clickable. I've hidden all the headers now as a temporary solution when user is in viewMode. Another problem with my workaround is I'm having to add a bunch of other styles that will be applied in viewMode because the headers take up a good 1/8th of my MatDialog so when they're not there, I found that I had to use [ngClass] in multiple areas.

I hadn't found a better workaround then [ngClass] for this problem I'm having. If anyone has a better solution, I'd love to hear it.

Thanks

Don Miko

贡献指南

打开贡献指南

调研方向

首先定位 mat-step 和 horizontal stepper 的入口点,然后检查现有的 completed 和 editable 属性如何影响导航和编辑。添加一个布尔型 disable 选项,使步骤保持可见,但阻止通过标题进行导航和编辑,并使用相关的 stepper 测试验证所请求的视图模式行为。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。