ステッパー

ステッパーコンポーネントは、マルチステップの進行をガイドすることで、ウィザードのようなワークフローを表示します。

インポート#


import { Stepper } from 'primereact/stepper';
import { StepperPanel } from 'primereact/stepperpanel';
         

基本#

ステッパーは、進行状況の各ステップをカプセル化するために、1つ以上のStepperPanel要素で構成されています。ステップ間を移動するための要素は、カスタマイズを容易にするために組み込まれていません。代わりに、prevCallbackおよび nextCallbackイベントをカスタムUI要素にバインドする必要があります。

コンテンツI

<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex pt-4 justify-content-end">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex pt-4 justify-content-between">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex pt-4 justify-content-start">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>
         

垂直#

ステッパーのレイアウトは、orientationプロパティで設定され、horizontalとverticalが利用可能なオプションとして受け入れられます。

コンテンツI

<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex py-4">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex py-4 gap-2">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex py-4">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>
         

線形#

linearプロパティが存在する場合、次のステップに進むには、現在のステップを完了する必要があります。

コンテンツI

<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex pt-4 justify-content-end">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex pt-4 justify-content-between">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex pt-4 justify-content-start">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>
         

ヘッダー#

ステッパーのヘッダー位置は、headerPositionプロパティを使用してカスタマイズできます。デフォルト値はrightです。

上部の位置
右側の位置
左側の位置
下部の位置

<h5>Position top</h5>
<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="top">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position right</h5>
<Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="right">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position left</h5>
<Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="left">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position bottom</h5>
<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="bottom">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
         

アクセシビリティ#

スクリーンリーダー

ステッパーコンテナはtablistロールで定義され、属性がコンテナ要素に渡されるため、必要に応じてaria-labelledbyを使用して、ステッパーを説明する要素を指定できます。各ステッパーヘッダーにはtabロールと、対応するステッパーコンテンツ要素を参照するためのaria-controlsがあります。各ステッパーのコンテンツ要素にはtabpanelロール、ヘッダーのaria-controlsと一致するid、およびアクセシブル名としてのヘッダーへのaria-labelledby参照があります。

タブヘッダーキーボードサポート

キー機能
tabヘッダーを介してフォーカスを移動します。
enterフォーカスされたステッパーヘッダーをアクティブにします。
spaceフォーカスされたステッパーヘッダーをアクティブにします。
              PrimeReact 10.8.3 by PrimeTek