lightning:progressIndicator

lightning:progressIndicator コンポーネントは、プロセスのステップのリストを横方向で表示し、指定されたプロセスのステップ数、現在のステップ、および前の完了済みステップを示します。たとえば、セールスパスは進行状況インジケータを使用して、営業担当にセールスプロセスのフェーズを示します。

type 属性を指定して、異なるビジュアルスタイル設定の進行状況インジケータを作成できます。Lightning Design System の進行状況インジケータからスタイル設定を継承するコンポーネントを作成するには、type="base" を設定します。Lightning Design System のパスのスタイル設定を継承するコンポーネントを作成するには、type="path" を設定します。

タイプが指定されていない場合、デフォルトのタイプ (base) が使用されます。ステップを作成するには、1 つ以上の lightning:progressStep コンポーネントを label および value 属性と共に使用します。現在のステップを指定するには、currentStep 属性が lightning:progressStep コンポーネントのいずれかの value 属性と一致する必要があります。

1<aura:component>
2    <lightning:progressIndicator currentStep="step2">
3        <lightning:progressStep label="Step One" value="step1"/>
4        <lightning:progressStep label="Step Two" value="step2"/>
5        <lightning:progressStep label="Step Three" value="step3"/>
6    </lightning:progressIndicator>
7</aura:component>

前の例では、ステップにマウスポインタを置いたときにツールチップで label が表示されます。進行状況インジケータのタイプが path の場合、表示ラベルはステップが完了済みの場合はフロート表示され、現在のステップまたは未完了のステップの場合はそのステップ上に表示されます。

次の例では、「Step Two」で現在のステップを表示するパスを作成します。「Step One」は完了済みとマークされ、「Step Three」は未完了です。

1<aura:component>
2    <lightning:progressIndicator type="path" currentStep="step2">
3        <lightning:progressStep label="Step One" value="step1"/>
4        <lightning:progressStep label="Step Two" value="step2"/>
5        <lightning:progressStep label="Step Three" value="step3"/>
6    </lightning:progressIndicator>
7</aura:component>

各進行状況ステップは、補助テキストでもそのステップの表示ラベルが表示されます。base タイプの場合、Tab キーを使用して次のステップに移動できます。Shift+Tab キーを押すと、前のステップに戻ります。path タイプの場合、Tab キーを押して現在のステップを有効にし、上下左右矢印キーを使用してステップ間を移動します。