ステップ

ステップは、ステッパーとも呼ばれ、ワークフローにおけるステップのインジケーターです。ステップコンポーネントのレイアウトは、レスポンシブデザインに最適化されています。

インポート#


import { Steps } from 'primereact/steps';
         

基本#

ステップには、modelとしてメニュー項目のコレクションが必要です。


<Steps model={items} />
 

制御#

ステップは、activeIndexプロパティを使用してプログラムで制御できます。


<Steps model={items} />
 

線形#

ステップはデフォルトで線形であり、前のステップの完了を強制して進むことができます。非線形モードの場合は、readOnlyをfalseに設定します。


<Steps readOnly model={items} />
 

インタラクティブ#

コンポーネントにインタラクティビティを追加するには、readOnlyを無効にし、ステップを制御するためにonSelectとともにactiveIndexへのバインディングを使用します。


<Toast ref={toast}></Toast>
<Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
 

テンプレート#

ステップは、アイテムのインスタンスを受け取り要素を返すアイテムのtemplateプロパティでアイテムのカスタマイズを提供します。


<Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
 

アクセシビリティ#

スクリーンリーダー

ステップコンポーネントはnav要素を使用し、暗黙的にすべての属性がルートに渡されるため、コンポーネントを説明するためにaria-labelledbyまたはaria-labelを使用できます。順序付きリスト内では、現在のステップ項目がaria-currentを「step」として定義する場所で使用されます。

キーボードサポート

キー機能
tabフォーカスがコンポーネントに移動すると、アクティブなステップにフォーカスを追加します。すでにフォーカスのあるタブヘッダーがある場合は、ページのタブシーケンスに基づいてフォーカスをコンポーネントから移動します。
enterreadonlyが有効になっていない場合、フォーカスされたステップをアクティブにします。
spacereadonlyが有効になっていない場合、フォーカスされたステップをアクティブにします。
右矢印readonlyが有効になっていない場合、フォーカスを次のステップに移動します。
左矢印readonlyが有効になっていない場合、フォーカスを前のステップに移動します。
homereadonlyが有効になっていない場合、フォーカスを最初のステップに移動します。
endreadonlyが有効になっていない場合、フォーカスを最後のステップに移動します。
                PrimeReact 10.8.3 by PrimeTek