StepFormDialog
ステップを複数に分けたダイアログです。タスクの完了に複数の操作が必要な場合に使います。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
Props
title必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
ダイアログタイトル
className
string
onSubmit必須
(closeDialog: () => void, e: FormEvent<HTMLFormElement>, currentStep: StepItem) => StepItem
アクションボタンをクリックした時に発火するコールバック関数 @param closeDialog ダイアログを閉じる関数 @param currentStep onSubmitが発火した時のステップ @returns 次のステップに遷移する場合は次のステップ、遷移しない場合はundefined
decorators
DecoratorsType<"closeButtonLabel" | "nextButtonLabel" | "backButtonLabel">
コンポーネント内の文言を変更するための関数を設定
titleTag非推奨
"h1" "h2" "h3" "h4" "h5" "h6"
ダイアログヘッダーの HTML タグ @deprecated SectioningContent(Article, Aside, Nav, Section)でDialog全体をラップして、ダイアログタイトルのHeadingレベルを設定してください
responseMessage
ResponseMessageTypeWithoutProcessing { status: "processing"; }
contentBgColor
"GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20" "WHITE" "BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"
onClickClose必須
() => void
contentPadding
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3S" "X3L" { block?: Gap; inline?: Gap; }
firstStep必須
StepItem
subtitle
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
ダイアログサブタイトル
submitLabel必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
アクションボタンのラベル
actionTheme
"primary" "danger" "secondary"
アクションボタンのスタイル
actionDisabled
false true
アクションボタンを無効にするかどうか
closeDisabled
false true
閉じるボタンを無効にするかどうか
stepLength必須
number
onClickBack
() => void
width
string number
ダイアログの幅
firstFocusTarget
RefObject<HTMLElement>
ダイアログを開いた時にフォーカスする対象
ariaLabel
string
ダイアログの aria-label
ariaLabelledby
string
ダイアログの aria-labelledby
isOpen必須
false true
ダイアログを開いているかどうか
onPressEscape
() => void
エスケープキーを押下した時に発火するコールバック関数
onClickOverlay
() => void
オーバーレイをクリックした時に発火するコールバック関数
portalParent
HTMLElement RefObject<HTMLElement>
DOM 上でダイアログの要素を追加する親要素