一連の手順やイベントを順を追って表示するには、Steps を使用します。必要に応じて任意の数のステップを追加できます。
1

First Step

これは最初のステップにのみ該当する手順またはコンテンツです。
2

Second Step

これは2番目のステップにのみ該当する手順またはコンテンツです。
3

Third Step

これは3番目のステップにのみ該当する手順またはコンテンツです。
Steps example
<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

​
Steps のプロパティ

​
children
ReactElement<StepProps>[]
required
Step コンポーネントの配列。
​
titleSize
string
default:"p"
ステップタイトルのサイズ。p、h2、h3 のいずれか。

​
各ステップのプロパティ

​
children
string | ReactNode
required
ステップの内容。プレーンテキストまたはコンポーネントとして指定できます。
​
icon
string
表示するアイコン。オプション:
  • Font Awesome icon の名前
  • Lucide icon の名前
  • 中括弧で囲んだ JSX 互換の SVG コード
  • 外部でホストされているアイコンへの URL
  • プロジェクト内のアイコンファイルへのパス
カスタム SVG アイコンの場合:
  1. SVGR converter を使って SVG を変換します。
  2. SVG コードを SVG の入力フィールドに貼り付けます。
  3. JSX の出力フィールドから完全な <svg>...</svg> 要素をコピーします。
  4. JSX 互換の SVG コードを中括弧で囲みます: icon={<svg ...> ... </svg>}。
  5. 必要に応じて height と width を調整します。
​
iconType
string
Font Awesome のアイコンスタイル。Font Awesome のアイコンでのみ使用されます。オプション: regular, solid, light, thin, sharp-solid, duotone, brands。
​
title
string
ステップのメインテキストで、インジケーターの横に表示されます。
​
stepNumber
number
ステップ番号。
​
titleSize
string
default:"p"
ステップタイトルのサイズ。p、h2、h3 のいずれか。