angular / angular/components

Support disabling steps in the Stepper

オープン
#17,294 コメント 9 件 リアクション 18 件 担当者 0 名 GitHub で見る
area: cdk/stepper feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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 プロパティがナビゲーションと編集にどのような影響を与えるかを確認します。ステップを表示したまま、ヘッダーからのナビゲーションと編集を防止する boolean 型の disable オプションを追加し、関連する stepper テストで要求されたビューモードの動作を検証します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。