[Angular Material入門] 普通のinputに飽きた?ならStepperはどうですか😉

今回は、Angular Materialのステッパーを個人的に把握がてら紹介をしたいと思います。

普通のインプットを作って入力では味気ないと思ってる方は是非使ってみては?😉

公式の使用例をそのままコピペでも動きますが、

前回、しっかり訳さなくて痛い目にあったので、書いてあることは把握していきます。

機械翻訳ですが、参考になれば幸いです。^^

例えばこんなふうに使えます。サンプル

Angular Materialをもし導入していなければ、次のリンクを参考にしてください。

[Angular入門] Angular5 への Angular Materialの導入方法! – まんくつ

使用バージョン Angular:5.2 Angular Material:5.2.4(2018/03/26)

ステッパーとは?

Angular Materialのステッパーは、コンテンツを論理的なステップに分割してウィザードのようなワークフローを提供します。

また、ステッパーは、ステップワークフローを推進するロジックを担当するCDKステッパーの基盤上に構築されています。Angular MaterialのステッパーはCDKステッパーを拡張し、マテリアルデザインスタイリングを備えています

CDKステッパー:Component Dev Kitのステッパー

参考リンク:Stepper | Angular Material

ステッパーの種類

次の2つのステッパーコンポーネントがあります。

  • mat-horizontal-stepper
  • mat-vertical-stepper

これらは同じように使うことができます。 唯一の違いは、ステッパーの向きです。

mat-horizontal-stepperを使用して水平ステッパーを作成し、

mat-vertical-steppeを使用して垂直ステッパーを作成することができます。

mat-stepコンポーネントは、2つのステッパーコンポーネントのいずれか1つの内側に配置する必要があります。

ラベル

mat-step label=”text”

mat-stepタグにはlabel属性を指定できます。

テキストのみ有効です。

サンプルコード

ng-template matStepLabel

より複雑なラベルを作成するには、mat-stepタグ内に

matStepLabel指示文を含むテンプレートを追加します。

ラベルにひと手間かけるならこちらがいいでしょう。

サンプルコード

ステッパーボタン

異なるステップ間のナビゲーションをサポートする2つのボタン指示があります。

  • matStepperPrevious
  • matStepperNext

ステップの内部に配置されると、自動的にクリックハンドラが追加され、ワー​​クフローを前進または巻き戻すことができます。

サンプルコード

ステッパーのリセット

ステッパーを初期状態にリセットする場合は、resetメソッドを使用できます。リセットすると、フォームコントロールのresetが呼び出され、値がクリアされます。

<mat-horizontal-stepper #stepper=”matHorizontalStepper”>



<mat-step>
<div>
<button mat-button (click)=”stepper.reset()”>Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>

リニアステッパー

linear属性はmat-h​​orizo​​ntal-stepperとmat-vertical-stepperに設定して、次の手順に進む前に今のステップを完了する必要があるリニアステッパーを作成できます。

<mat-horizontal-stepper linear>

各mat-stepごとに、stepControl属性を設定すると、ステップの有効性をチェックするために使用されるトップレベルControl属性のAbstractControlに設定することができます。

<mat-step [stepControl]=”formGroup1″>

可能なアプローチは2つあります。 1つはステッパーに単一のフォームを使用し、もう1つは各ステップに異なるフォームを使用します。

単一フォームサンプル

ステッパーに単一のフォームを使用する場合、すべてのステップが完了する前のフォームの送信を防ぐために、matStepperPreviousおよびmatStepperNextをtype = ‘button’に設定する必要があります。

各ステップに異なるフォームサンプル

また、Angular/formsを使用しなくても、completedプロパティを各ステップに渡し、次のステップに移ることはできますが、入力値の確認はできません。入力値の確認はユーザビリティを考えると必要なことがほとんどです。

completedとstepControlの両方が設定されている場合は、stepControlが優先されます。

ステップの種類

公式を読んだだけではよくわからないので、

下のリンクを参考にしました。わかりやすい。

Steppers – Components – Material Design

任意のステップ

mat-stepにoptional属性を設定することで、

リニアが設定されていたとしても、そのステップを任意のものにできます。

入力がなくても次に進めます。

<mat-step optional>

編集可能なステップ

デフォルトでは、ステップは編集可能です。これにより、ユーザーは以前に完了したステップに戻り、そのステップを編集できます。デフォルトを変更するには、mat-stepでeditable = ‘false’を設定することで編集不可にできます。

<mat-step label=”Step 1″ editable = ‘false’>

Step1が編集不可になっているのでStep1は表示されません。

次のステップに移ったら編集できないとかにつかえそうですね。

完了したステップ

Stepper | Angular Material

よくわかりません。

アイコンを無効にする

デフォルトでは、ステップヘッダーは要素を介して設定されたマテリアルデザインアイコンの作成アイコンと完了アイコンを使用します。別のアイコンセットを提供したい場合は、表示させたいアイコンごとにmatStepperIconを配置します。

デフォルト

例えば次のようにすれば編集中のアイコンが顔に変わります。

<ng-templatematStepperIcon=”edit”>
<mat-icon>face</mat-icon>
</ng-template>

アイコンリスト:Material icons – Material Design

キーボード操作

  • LEFT_ARROW:前のステップのヘッダーをフォーカス
  • RIGHT_ARROW:次のステップヘッダーをフォーカス
  • ENTER、SPACE:フォーカスしているステップを選択
  • TAB:次のタブ選択可能な要素にフォーカス
  • TAB + SHIFT:前のタブ選択可能な要素にフォーカス

ラベルのローカライズ

多言語対応用のサービスが用意されているようです。

Stepper | Angular Material

アクセシビリティ

ステッパーはアクセシビリティのためにタブ付きのビューとして扱われるため、デフォルトではrole = ‘tablist’が与えられます。

ステップを選択するためにクリックできるステップのヘッダーにはrole = ‘tab’が与えられ、選択時に展開できるコンテンツにはrole = ‘tabpanel’が与えられます。

ステップ選択変更に基づいて、ステップヘッダーのaria-selected属性とステップ内容のaria-expandedが自動的に設定されます。

ステッパーと各ステップには、aria-labelまたはaria-labelledbyを使用して意味のあるラベルを付ける必要があります。

サンプルコード

ざっと作ってみました。

参考までにコードを置いておきます。

入力した値をFirebaseに追加しています。

Firebase導入していなければ次のリンクを参考にどうぞ。

Angular5+Firebaseでチャットアプリを作る② Firebase連携編 – まんくつ

また、Bootstrapを入れているので、

入れていなければ少し見た目がかわります。

導入参考:[1ヶ月でAngular] はじめてのアプリ制作!メイン機能編 – まんくつ

app.module.ts

custom-material.module.ts

app.component.ts

app.component.html

completed.component.html

completed.component.css

pass.pipe.ts

最後まで、謎だったのがCompleted属性。

Angular Materialでは入力してもチェックアイコンが何故か付きません。

公式のサンプルでも入力完了しても編集中アイコンになるだけです。

公式サンプル:Stepper | Angular Material

ちゃんと使えないので気持ち悪い感じがありますが、

あれだけの素材が簡単に使えるだけ良しとしました。

それと、どうやらAngular Materialは、

Material DesignをAngular向けにしたものらしく

参考:Steppers – Components – Material Design

本家では、Mobile stepsというモバイル向けのステッパーがあるようです。

つかってみたいなー。

それでは素敵なAngularライフを👋

シェアする

  • このエントリーをはてなブックマークに追加

フォローする