AngularMaterialステッパーを使用しています。STEPPER_GLOBAL_OPTIONSを使用して、次のようにステップの状態を変更できます。
<mat-step [stepControl]="secondFormGroup" optional state="phone">
</mat-step>
ただし、これらのアイコンのリストにアクセスするにはどうすればよいですか？または、自分で使用する方法はありますか？
デフォルトでは、ステップヘッダーは、要素を介して設定されたマテリアルデザインアイコンの作成アイコンと完了アイコンを使用します。異なるアイコンのセットを提供する場合は、オーバーライドするアイコンごとにmatStepperIconを配置することで提供できます。個々のステップのインデックス、アクティブ、およびオプションの値は、テンプレート変数から利用できます。
<mat-vertical-stepper>
<ng-template matStepperIcon="edit">
<mat-icon>insert_drive_file</mat-icon>
</ng-template>
<ng-template matStepperIcon="done">
<mat-icon>done_all</mat-icon>
</ng-template>
<!-- Custom icon with a context variable. -->
<ng-template matStepperIcon="number" let-index="index">
{{index + 10}}
</ng-template>
<!-- Stepper steps go here -->
</mat-vertical-stepper>
カスタムアイコンを提供する場合は、mat-iconコンポーネントの使用に限定されないことに注意してください。
https://material.angular.io/components/stepper/overview#overriding-icons
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加