Angularのマテリアルデザインの一つに「Stepper」というものがあります。
こいつですが、デフォルトにあるオプションで最大限設定しても、ヘッダ部分を押すと、勝手にステップが進んでしまいます。
ということで今回は、この動きを封じる方法を解説します。
公式サイト
Stepperの動きを整理
Stepperは「isEditable = false;」を設定することで、そのセクションで表示されているフィールドが正しく入力された場合のみ、ステップを進めることができます。
上記だと、「Last name, First name」に値が設定されていないのでステップは進みません。
ここで正しい値を入力するとステップを進めることができるのですが、問題なのは「Next」ボタンではなく、「②Fill out your address」というヘッダを押してもステップが進んでしまうことです。
Stepperのヘッダを押して進むのは何が問題？
例えば、「Next」ボタンでサーバにアクセスし、成功した場合のみステップを進めたい場合、「Next」ボタンを押さなくても、ヘッダを押したらステップを進めてしまいます。
要は、表示されているセクションでクライアントエラーが出ていなければ前に進めちゃうわけです。
Stepperのヘッダを押してもステップを進めないようにする
以下のCSSを「styles.css」とかでいいので追記します。
これでヘッダをクリックしてもステップが進まなくなります。
Stepperが縦向きの場合
|
1 2 3 |
.mat-vertical-stepper-header { pointer-events: none !important; } |
Stepperが横向きの場合
|
1 2 3 |
.mat-vertical-stepper-header { pointer-events: none !important; } |
関連記事
以下は、StepperをJavaScriptで進める方法です。
これを組み合わせることで、やれることの幅が広がります。
Materialデザインには「Stepper」と呼ばれるものがあります。 ↓こんなやつですね。 で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJ[…]
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
マテリアルデザイン系は痒い所に手が届かないことが多いですね。
ただ、海外サイトなんかは色々情報が豊富なのでありがたいです。
ではまた！