月間29,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

【Angular】Material Stepperのヘッダクリック時の動きを封じる方法!

【Angular】Material Stepperのヘッダクリック時の動きを封じる方法!
Advertisement

 

Angularのマテリアルデザインの一つに「Stepper」というものがあります

Material Stepper

 

こいつですが、デフォルトにあるオプションで最大限設定しても、ヘッダ部分を押すと、勝手にステップが進んでしまいます。

ということで今回は、この動きを封じる方法を解説します。

 

 

僕のPC環境

OS:Windows10

Angular:7

 

 

公式サイト

以下が公式サイトになります。

■Stepper | Angular Material

URL:「https://material.angular.io/components/stepper/overview」

 

 

Stepperの動きを整理

Stepperは「isEditable = false;」を設定することで、そのセクションで表示されているフィールドが正しく入力された場合のみ、ステップを進めることができます。

 

Stepperの動きを整理

上記だと、「Last name, First name」に値が設定されていないのでステップは進みません。

ここで正しい値を入力するとステップを進めることができるのですが、問題なのは「Next」ボタンではなく、「②Fill out your address」というヘッダを押してもステップが進んでしまうことです。

 

 

Advertisement

 

Stepperのヘッダを押して進むのは何が問題?

例えば、「Next」ボタンでサーバにアクセスし、成功した場合のみステップを進めたい場合、「Next」ボタンを押さなくても、ヘッダを押したらステップを進めてしまいます。

要は、表示されているセクションでクライアントエラーが出ていなければ前に進めちゃうわけです。

 

 

Stepperのヘッダを押してもステップを進めないようにする

以下のCSSを「styles.css」とかでいいので追記します。これでヘッダをクリックしてもステップが進まなくなります。

 

Stepperが縦向きの場合

 

Stepperが横向きの場合

 

 

関連記事

以下は、StepperをJavaScriptで進める方法です。これを組み合わせることで、やれることの幅が広がります。

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

マテリアルデザイン系は痒い所に手が届かないことが多いですね。

ただ、海外サイトなんかは色々情報が豊富なのでありがたいです。

ではまた!

Travelerを知らないの?